/*
  #796 — InvoiceLineDialog mobile rebuild (pixel-parity target: Docs/claude-design-template/
  design_handoff_factuurregel_mobiel/mocks/Dialog Factuurregel Mobiel.html, plus dialog-forms.css
  and invoice-theme.css from the same folder).

  Global, not CSS-isolated: MudDialog renders through a portal outside the component's own
  scoped-CSS boundary, so a `.razor.css` file cannot reach `.mud-dialog` (same precedent as
  article-dialog.css:1-24 and customer-dialog.css). Loaded BEFORE mobile.css (App.razor) so this
  file never depends on winning over it; the only overlap is mobile.css's `16px !important` on
  inputs, which is the value this dialog uses anyway.

  Token map (mock var -> app value):
    --primary        -> var(--primary-color) / rgba(var(--primary-rgb), a)
    --muted          -> var(--text-muted)
    --surface        -> var(--custom-white)
    --border         -> literal #eef0f3   (app's --default-border is #f3f3f3; the drawer/dialog
                                           parity stories #731-#775 use the mock's own literal)
    --text-strong    -> literal #232427   (app's --default-text-color is #333335; same precedent)

  Lessons carried over (see article-dialog.css / customer-dialog.css):
    - Ynex gives every .mud-dialog a 1px border: cancelled here (#773).
    - MudBlazor's `input.mud-input-root{box-sizing:content-box}` (0,1,1) beats a universal
      border-box reset (0,1,0): the control rules name `input.mud-input-root` explicitly (#773).
    - MudBlazor's `.mud-dialog` open animation ends at `transform: scale(1)` with fill-mode both,
      which leaves a compositing layer behind and shifts glyph ink by one device pixel:
      `animation:none; transform:none` (#773). Centring at >=761px is done with auto margins,
      never with a transform.
    - Error styling is driven by Razor-bound classes (`.is-error`), not by MudBlazor's own
      `.mud-input-error`, which is dropped after blur (#777).

  Line-total amount: the mock uses Inter 800, which the app does not ship globally (it would change
  19 existing weight-800 rules). "Inter Ild" is a scoped family that maps that one file to `.ild-inc`.
*/

@font-face {
    font-family: "Inter Ild";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/inter/Inter-800.woff2") format("woff2");
}

/* ---- dialog paper ----
   #899: the paper is sized to its content and centred by MudBlazor's centre container (align-items/justify-content:
   center). Side insets as in #796: 10px on a phone (370px at 390px), capped at 560px on desktop; never taller than
   the viewport minus 20px, then only .ild-body scrolls. The paper must NOT carry a `position` declaration: a
   fixed/absolute/relative paper made every MudSelect popover item swallow its click (popover closed on pointerdown,
   before the click landed; found by bisecting in #796). The same holds for the picker paper (.ild-picker-dialog). */
.mud-dialog.invoice-line-dialog {
    /* The mock's font stack (var(--ff)), not the app's "Inter, sans-serif": the fallback list takes part in the
       line box, so a select/input value text sat 2 device px lower than the mock whenever the box top was fractional
       (VAT select with the article note open). Same finding as #793 (--if-row-ff). Compared as a full stack by the harness. */
    --ild-ff: Inter, -apple-system, sans-serif;
    /* styles.css gives `.mud-dialog-container .mud-dialog` flex-grow:1; the paper must not grow */
    flex-grow: 0;
    width: calc(100% - 20px);
    max-width: 560px !important;
    max-height: calc(100dvh - 20px);
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 14px;
    box-shadow: 0 28px 70px rgba(20, 24, 40, .28);
    background: var(--custom-white);
    overflow: hidden;
    font-family: var(--ild-ff);
    /* inherited typography equals the mock body (Inter 16px, #2b2f36); Ynex would give 13.008px / #333335 */
    font-size: 16px;
    font-weight: 400;
    color: #2b2f36;
    line-height: normal;
    letter-spacing: normal;
    animation: none;
    transform: none;
}

.invoice-line-dialog *,
.invoice-line-dialog *::before,
.invoice-line-dialog *::after {
    box-sizing: border-box;
}

/* ---- MudBlazor chrome ---- */
.invoice-line-dialog .mud-dialog-title,
.invoice-line-dialog .mud-dialog-actions {
    padding: 0;
    margin: 0;
    /* Ynex draws a 1px border on both; the header and footer carry their own borders */
    border: 0;
    line-height: normal;
    letter-spacing: normal;
    flex: none;
}

.invoice-line-dialog .mud-dialog-content {
    padding: 0;
    margin: 0;
    color: inherit;
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: static;
}

.ild-root {
    display: contents;
}

/* neutralise MudBlazor's own error/helper chrome: the dialog draws its own messages */
.invoice-line-dialog .mud-input-helper-text,
.invoice-line-dialog .mud-input-control-helper-container {
    display: none;
}

.invoice-line-dialog .mud-input-control,
.invoice-line-dialog .mud-input-control-input-container,
.invoice-line-dialog .mud-input,
.invoice-line-dialog .mud-input.mud-input-text {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    min-width: 0;
}

.invoice-line-dialog .mud-input-outlined-border,
.invoice-line-dialog .mud-input-underline::before,
.invoice-line-dialog .mud-input-underline::after {
    display: none;
    border: none;
}

.invoice-line-dialog .mud-input.mud-input-error input,
.invoice-line-dialog .mud-input.mud-input-error textarea,
.invoice-line-dialog .mud-input.mud-input-error .mud-input-root {
    color: #232427;
}

.invoice-line-dialog input[type="number"]::-webkit-outer-spin-button,
.invoice-line-dialog input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---- header ---- */
.ild-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    border-bottom: 1px solid #eef0f3;
}

.ild-di {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 19px;
    background: rgba(var(--primary-rgb), .1);
    color: var(--primary-color);
}

.ild-head-text {
    min-width: 0;
    flex: 1;
}

.ild-dt {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    color: #232427;
}

.ild-ds {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invoice-line-dialog .ild-x,
.ild-picker-dialog .ild-x {
    margin-left: auto;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 8px;
    border: none;
    background: #f4f5f8;
    color: #5b6472;
    font-size: 20px;
    display: grid;
    place-items: center;
    cursor: pointer;
    /* the mock leaves these icon-only buttons at their UA defaults */
    font-family: revert;
    padding: revert;
}

/* ---- body ---- */
.ild-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scrollbar-width: none;
}

.ild-body::-webkit-scrollbar {
    display: none;
}

.ild-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
}

.ild-span2 {
    grid-column: 1 / -1;
}

.ild-f {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ild-f > label {
    font-size: 12.5px;
    font-weight: 600;
    color: #4d5663;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    white-space: nowrap;
    line-height: 1.3;
}

.ild-opt {
    font-weight: 500;
    color: var(--text-muted);
}

.ild-req {
    color: var(--primary-color);
    font-weight: 700;
}

/* ---- controls ---- */
.ild-ctl {
    position: relative;
    display: flex;
    align-items: stretch;
}

.invoice-line-dialog .ild-ctl input.mud-input-root,
.invoice-line-dialog .ild-ctl textarea.mud-input-root {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #e3e7ef;
    border-radius: 9px;
    background: #fff;
    font-family: var(--ild-ff) !important;
    font-size: 16px !important;
    color: #232427;
    outline: none;
    padding: 0 13px !important;
    margin: 0;
    height: 46px;
    transition: .15s;
    line-height: normal;
    /* MudBlazor typography adds .00938em letter-spacing to its inputs */
    letter-spacing: normal !important;
}

.invoice-line-dialog .ild-ctl input.mud-input-root {
    box-sizing: border-box;
    height: 46px;
}

.invoice-line-dialog .ild-ctl textarea.mud-input-root {
    box-sizing: border-box;
    height: 76px;
    padding: 11px 13px !important;
    line-height: 1.5;
    resize: vertical;
}

.invoice-line-dialog .ild-ctl input.mud-input-root::placeholder,
.invoice-line-dialog .ild-ctl textarea.mud-input-root::placeholder {
    color: #b3b8c2;
    font-weight: 400;
    opacity: 1;
}

.invoice-line-dialog .ild-ctl input.mud-input-root:focus,
.invoice-line-dialog .ild-ctl textarea.mud-input-root:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

.invoice-line-dialog .ild-ctl.is-error input.mud-input-root,
.invoice-line-dialog .ild-ctl.is-error textarea.mud-input-root {
    border-color: #e0705c;
    box-shadow: 0 0 0 3px rgba(224, 112, 92, .12);
}

.invoice-line-dialog .ild-has-pre input.mud-input-root {
    padding-left: 30px !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ild-fx {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13.5px;
    font-weight: 600;
    color: #9aa1ad;
    pointer-events: none;
    z-index: 1;
}

/* select: MudSelect renders a hidden input plus a div.mud-select-input that shows the text (inline
   style display:inline), so the div is the bordered control. Value text 16px/600, chevron 18px
   #9aa1ad at right 13. */
.invoice-line-dialog .ild-sel .mud-input,
.article-dialog .ild-sel .mud-input {
    position: relative;
}

.invoice-line-dialog .ild-sel div.mud-input-slot.mud-input-root,
.article-dialog .ild-sel div.mud-input-slot.mud-input-root {
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    width: 100%;
    height: 46px;
    border: 1px solid #e3e7ef;
    border-radius: 9px;
    background: #fff;
    font-family: var(--ild-ff) !important;
    font-size: 16px !important;
    font-weight: 600;
    color: #232427;
    padding: 0 38px 0 13px !important;
    margin: 0;
    line-height: normal;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .15s;
    letter-spacing: normal !important;
}

.invoice-line-dialog .ild-sel div.mud-input-slot.mud-input-root:focus,
.article-dialog .ild-sel div.mud-input-slot.mud-input-root:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

.invoice-line-dialog .ild-sel .mud-input-adornment,
.article-dialog .ild-sel .mud-input-adornment {
    display: contents;
}

.invoice-line-dialog .ild-sel .mud-input-adornment .mud-icon-root,
.article-dialog .ild-sel .mud-input-adornment .mud-icon-root {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    pointer-events: none;
    font-size: 18px;
    line-height: normal;
    width: auto;
    height: auto;
    color: #9aa1ad;
}

/* discount segment */
.invoice-line-dialog .ild-disc input.mud-input-root {
    padding-right: 100px !important;
}

.ild-dseg {
    position: absolute;
    right: 5px;
    top: 5px;
    display: flex;
    background: #f1f3f7;
    border-radius: 7px;
    padding: 3px;
    gap: 2px;
    z-index: 1;
}

.ild-dseg button {
    width: 40px;
    height: 30px;
    border: none;
    border-radius: 5px;
    background: transparent;
    font-family: var(--ild-ff);
    font-size: 14px;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
    padding: revert;
    line-height: normal;
}

.ild-dseg button.is-on {
    background: #fff;
    color: var(--primary-color);
    box-shadow: 0 1px 3px rgba(40, 50, 80, .12);
}

.ild-sub {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.45;
}

/* ---- article picker, note, divider ---- */
.invoice-line-dialog .ild-pick {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid #e3e7ef;
    border-radius: 9px;
    background: #fff;
    font-family: var(--ild-ff);
    font-size: 16px;
    color: #b3b8c2;
    cursor: pointer;
    text-align: left;
    line-height: normal;
}

.ild-pick.is-set {
    color: #232427;
    font-weight: 600;
}

.ild-pick i.ild-lead {
    font-size: 18px;
    color: #9aa1ad;
}

.ild-pick.is-set i.ild-lead {
    color: var(--primary-color);
}

.ild-pick span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ild-pick i.ild-chev2 {
    font-size: 18px;
    color: #9aa1ad;
}

.ild-srcnote {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.45;
}

.ild-srcnote i {
    font-size: 14px;
    color: var(--primary-color);
}

.invoice-line-dialog .ild-srcnote button {
    margin-left: auto;
    border: none;
    background: none;
    font-family: var(--ild-ff);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    padding: 4px 0;
    line-height: normal;
}

.ild-or {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #b3b8c2;
}

.ild-or::before,
.ild-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #eef0f3;
}

/* ---- quantity stepper ---- */
.ild-step {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    height: 46px;
    border: 1px solid #e3e7ef;
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
}

.invoice-line-dialog .ild-step button {
    border: none;
    background: #f6f7fa;
    color: #4d5663;
    font-size: 18px;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-family: revert;
    padding: revert;
}

.ild-step button:active {
    background: rgba(var(--primary-rgb), .12);
    color: var(--primary-color);
}

.invoice-line-dialog .ild-step input.mud-input-root {
    box-sizing: border-box;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 0 4px !important;
    margin: 0;
    height: 44px !important;
    width: 100%;
    min-width: 0;
    font-family: var(--ild-ff) !important;
    font-size: 16px !important;
    color: #232427;
    outline: none;
    background: #fff;
    line-height: normal;
    letter-spacing: normal !important;
}

.ild-step.is-error {
    border-color: #e0705c;
    box-shadow: 0 0 0 3px rgba(224, 112, 92, .12);
}

.ild-step:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

/* ---- validation messages ---- */
.ild-err {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #d4563b;
}

.ild-err i {
    font-size: 15px;
}

.ild-err-qty {
    margin-top: -6px;
}

/* ---- fixed line-total bar ---- */
.ild-sum {
    flex: none;
    padding: 12px 16px;
    border-top: 1px solid #eef0f3;
    background: rgba(var(--primary-rgb), .05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ild-sk {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    min-width: 0;
}

.ild-sk b {
    display: block;
    font-size: 12.5px;
    color: #4d5663;
    font-weight: 600;
}

.ild-sk .ild-dl {
    color: #109e78;
    font-weight: 600;
}

.ild-sv {
    text-align: right;
    white-space: nowrap;
}

.ild-inc {
    font-family: "Inter Ild", -apple-system, sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}

.ild-exc {
    font-size: 11.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}

/* ---- footer ---- */
.ild-foot {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 10px;
    padding: 12px 16px 14px;
    border-top: 1px solid #eef0f3;
    background: var(--custom-white);
}

.invoice-line-dialog .ild-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 48px;
    min-width: 0;
    padding: 0 16px;
    border-radius: 9px;
    font-family: var(--ild-ff) !important; /* beats .mud-button-root */
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
}

.invoice-line-dialog .ild-btn .mud-button-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ild-btn i {
    font-size: 16px;
}

.invoice-line-dialog .ild-btn-light {
    background: #fff;
    color: #4d5663;
    border: 1px solid #eef0f3;
}

.invoice-line-dialog .ild-btn-light:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.invoice-line-dialog .ild-btn-primary {
    background: var(--primary-color) !important;
    color: #fff !important;
    border: none;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), .26);
}

.invoice-line-dialog .ild-btn-primary.mud-button-disabled,
.invoice-line-dialog .ild-btn-primary:disabled {
    opacity: .5;
    box-shadow: none;
    cursor: not-allowed;
    background: var(--primary-color) !important;
    color: #fff !important;
}

/* ---- article picker dialog (#899, own paper) ---- */
.mud-dialog.ild-picker-dialog {
    --ild-ff: Inter, -apple-system, sans-serif;
    flex-grow: 0;
    width: calc(100% - 20px);
    max-width: 440px !important;
    max-height: calc(100dvh - 20px);
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 14px;
    box-shadow: 0 28px 70px rgba(20, 24, 40, .28);
    background: var(--custom-white);
    overflow: hidden;
    font-family: var(--ild-ff);
    font-size: 16px;
    color: #2b2f36;
    line-height: normal;
    letter-spacing: normal;
    animation: none;
    transform: none;
}

.ild-picker-dialog *,
.ild-picker-dialog *::before,
.ild-picker-dialog *::after {
    box-sizing: border-box;
}

.ild-picker-dialog .mud-dialog-title {
    padding: 0;
    margin: 0;
    border: 0;
    flex: none;
}

.ild-picker-dialog .mud-dialog-content {
    padding: 12px 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    max-height: min(68vh, 620px);
    overflow: hidden;
}

.ild-picker-dialog .ild-lst {
    flex: 1 1 auto;
    min-height: 0;
}

.ild-srch {
    margin: 0 16px 8px;
    position: relative;
}

.ild-srch i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px;
    color: #9aa1ad;
}

.ild-picker-dialog .ild-srch input {
    width: 100%;
    height: 46px;
    border: 1px solid #e3e7ef;
    border-radius: 9px;
    padding: 0 13px 0 38px;
    font-family: var(--ild-ff);
    font-size: 16px;
    outline: none;
    line-height: normal;
}

/* the mock has no ::placeholder rule for .sheet .srch input (its .ctl rule does not reach it), so the sheet search
   renders Chrome's UA placeholder colour #757575: match the rendered colour, not the token */
.ild-picker-dialog .ild-srch input::placeholder {
    color: #757575;
    opacity: 1;
}

.ild-picker-dialog .ild-srch input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

.ild-lst {
    overflow-y: auto;
    padding: 4px 8px 12px;
}

.ild-picker-dialog .ild-it {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 10px;
    text-align: left;
    font-family: var(--ild-ff);
    /* the mock leaves the row button's size and colour at the UA defaults (children set their own) */
    font-size: revert;
    color: revert;
    cursor: pointer;
    line-height: normal;
}

.ild-it:active,
.ild-it.is-sel {
    background: rgba(var(--primary-rgb), .08);
}

.ild-it > div {
    flex: 1;
    min-width: 0;
}

.ild-it .ild-n,
.ild-it .ild-m {
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ild-it .ild-n {
    font-size: 14.5px;
    font-weight: 600;
    color: #232427;
}

.ild-it .ild-m {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.ild-it .ild-p {
    margin-left: auto;
    font-size: 14px;
    font-weight: 700;
    color: #3a4150;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ild-it.is-sel .ild-n,
.ild-it.is-sel .ild-p {
    color: var(--primary-color);
}

.ild-it .ild-ck {
    font-size: 18px;
    color: var(--primary-color);
}

.ild-free {
    border-top: 1px solid #eef0f3;
    margin: 4px 8px 0;
    padding-top: 4px;
}

.ild-free .ild-it .ild-n {
    color: #4d5663;
}

.ild-free i {
    font-size: 18px;
    color: #9aa1ad;
}

/* ---- backdrop: one layer of rgba(20,24,32,.45) (royal-theme.css:297-306 precedent) ---- */
.invoice-line-dialog-scrim .mud-overlay-scrim {
    background-color: rgba(20, 24, 32, .45) !important;
}

.invoice-line-dialog-scrim {
    background-color: transparent !important;
}

/* #899: the picker sits on top of the line dialog's scrim; its own backdrop is transparent so there is still one
   dark layer. The transparent overlay still catches the backdrop click. */
.ild-picker-scrim,
.ild-picker-scrim .mud-overlay-scrim {
    background-color: transparent !important;
}