/*
  #773 — ArticleDialog v2 redesign (pixel-parity target: Docs/claude-design-template/
  design_handoff_dialogs/mocks/Dialog Artikel Bewerken.html).

  Global, not CSS-isolated: MudDialog renders through a portal outside this component's own
  scoped-CSS boundary, so a `.razor.css` file cannot reach `.mud-dialog` — same precedent as
  quote-convert-dialog.css (App.razor).

  Token mapping (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; drawer-parity
                                             precedent #731-#736 uses the mock's own literal)
    --text-strong     -> literal #232427   (app's --default-text-color is #333335; same precedent)

  Mobile interaction: below 992px the app's existing mobile.css iOS focus-zoom guard forces
  input/select/textarea to 16px — this file's font-size rules are scoped to
  `@media (min-width: 992px)` so that guard is never overridden (accepted deviation 8).

  #773 round-2 rework (tester finding, test-round1.md MINOR): root-caused a 1px-per-column
  `.adlg-grid` shortfall (269px/269px live vs the mock's 270px/270px). Ynex's global rule
  `styles.css:14473` `.mud-dialog { border: 1px solid var(--default-border); }` puts a 1px
  border on every MudDialog paper. The dialog's own `width:600px` is border-box, so that
  border eats 2px total from every descendant's available width (dialog clientWidth 598,
  not 600) — invisible in the "width" and "padding" token checks (both still read exactly as
  declared) but visible one layer down in the grid's computed track sizes. The mock's `.dlg`
  (line ~23 of the handoff HTML) has no border at all, only `box-shadow` + `border-radius`, so
  the fix is to cancel Ynex's border here rather than to compensate the grid math.
*/

.mud-dialog.article-dialog {
    max-width: 600px !important;
    border: none;
    border-radius: 14px;
    box-shadow: 0 28px 70px rgba(20, 24, 40, .28);
    background: var(--custom-white);
    overflow: hidden;
    font-family: var(--default-font-family);
    line-height: normal;
    letter-spacing: normal;
    /*
      #773 round-4 rework (tester CRITICAL finding, test-round3.md): MudBlazor's own `.mud-dialog`
      rule declares `animation: mud-open-dialog-center .1s ... both;` whose keyframes end at
      `transform: scale(1)`. `animation-fill-mode: both` keeps that terminal transform applied
      forever after the 0.1s open animation finishes -- getComputedStyle(dlg).transform reads
      "matrix(1,0,0,1,0,0)", never "none", for as long as the dialog stays open. Any transform,
      even an identity scale(1), promotes the element to its own compositing layer, and Chromium
      rasterises the directly-painted .adlg-title/.adlg-subtitle text inside that layer at a
      different device-pixel snap than the mock's non-composited render: exactly 1 device pixel at
      DPR2, reproducibly, only for plain-text divs (native form-control value text is rendered via
      a separate UA path and is unaffected -- matching the tester's evidence that geometry/box
      positions were exact while only glyph ink position was off). Proven live against the running
      app: .agency/runs/773/verify-transform-theory.js flips computed transform from
      matrix(1,0,0,1,0,0) to none and the title/subtitle ink rows move to match the mock exactly.
      Cancelling both here, at specificity (0,2,0) which beats MudBlazor's own (0,1,0)
      unconditionally (same precedent as the border-cancel and box-sizing fixes above), removes the
      compositing layer. The mock never animates, so a static open is a fidelity improvement for
      this dialog, not a regression; other MudDialogs in the app keep the entrance animation
      because this rule is scoped to `.article-dialog` only. Pinned by ArticleDialogCssTests.
    */
    animation: none;
    transform: none;
}

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

.article-dialog .mud-dialog-title {
    padding: 18px 22px;
    border-bottom: 1px solid #eef0f3;
    line-height: normal;
    letter-spacing: normal;
}

.adlg-head {
    display: flex;
    align-items: center;
    gap: 13px;
}

.adlg-head-text {
    min-width: 0;
}

.adlg-icon {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 21px;
    background: rgba(var(--primary-rgb), .1);
    color: var(--primary-color);
}

.adlg-title {
    font-size: 16px;
    font-weight: 700;
    color: #232427;
}

.adlg-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adlg-close {
    margin-left: auto;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    background: #f4f5f8;
    color: #5b6472;
    font-size: 18px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.adlg-close:hover {
    background: #e9ebf0;
    color: var(--primary-color);
}

.article-dialog .mud-dialog-content {
    padding: 20px 22px;
    margin: 0;
    /* round 3: the Artikel mock's own inline value (min(70vh,660px) is a different, unrelated
       PROMPT.md section-1 default — not used here). */
    max-height: min(68vh, 620px);
    overflow-y: auto;
}

.article-dialog .mud-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid #eef0f3;
    background: var(--custom-white);
}

.adlg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

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

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

.adlg-f > label {
    font-size: 12px;
    font-weight: 600;
    color: #4d5663;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

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

.adlg-ctl {
    position: relative;
    display: flex;
    align-items: stretch;
}

.adlg-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;
}

.article-dialog .adlg-ctl input,
.article-dialog .adlg-ctl textarea,
.article-dialog .adlg-ctl select,
.article-dialog .adlg-ctl input.mud-input-root {
    /*
      #773 round-3 rework (tester CRITICAL finding, test-round2.md): MudBlazor's own stylesheet
      declares "input.mud-input-root,div.mud-input-slot.mud-input-root" with box-sizing:
      content-box, at specificity (0,1,1). This file's universal reset near the top of the file
      ("article-dialog *", etc.) only sets box-sizing: border-box at specificity (0,1,0), so it
      loses to MudBlazor's rule regardless of stylesheet load order — the price input (the only
      MudBlazor-rendered control in this dialog, via InlineAmountInput) rendered content-box, so
      its declared `height: 44px` became a 46px border-box height (44 + 1px top border +
      1px bottom border). Declaring box-sizing explicitly here, on a selector list that itself
      targets `input.mud-input-root`, gives specificity (0,3,1) — beats MudBlazor's (0,1,1)
      unconditionally, no `!important` needed. Pinned by ArticleDialogCssTests.
    */
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #e3e7ef;
    border-radius: 9px;
    background: #fff;
    font-family: var(--default-font-family) !important;
    color: #232427;
    outline: none;
    padding: 0 13px !important;
    height: 44px;
    transition: .15s;
    line-height: normal;
}

/* Desktop-only font sizes: below 992px, mobile.css's iOS focus-zoom guard (16px) stays in force. */
@media (min-width: 992px) {
    .article-dialog .adlg-ctl input,
    .article-dialog .adlg-ctl textarea,
    .article-dialog .adlg-ctl select,
    .article-dialog .adlg-ctl input.mud-input-root {
        font-size: 14px !important;
    }

    .article-dialog .adlg-ctl textarea {
        font-size: 13.5px !important;
    }
}

.article-dialog .adlg-ctl textarea {
    height: 96px;
    padding: 12px 13px !important;
    line-height: 1.5;
    resize: vertical;
}

.article-dialog .adlg-ctl select {
    appearance: none;
    font-weight: 600;
    cursor: pointer;
    padding-right: 38px !important;
}

.adlg-chev {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9aa1ad;
    pointer-events: none;
}

.article-dialog .adlg-has-pre input.mud-input-root {
    padding-left: 32px !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Neutralise MudTextField wrapper chrome so the price control matches the plain input styling. */
.article-dialog .adlg-price,
.article-dialog .adlg-price .mud-input-control-input-container,
.article-dialog .adlg-price .mud-input {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.article-dialog .adlg-price .mud-input-outlined-border,
.article-dialog .adlg-price .mud-input-underline::before,
.article-dialog .adlg-price .mud-input-underline::after {
    display: none;
    border: none;
}

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

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

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

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

.adlg-count {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.adlg-err {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #d4563b;
}

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

.adlg-chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.adlg-chip {
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #eef0f3;
    background: #fff;
    font-family: var(--default-font-family);
    font-size: 12px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: normal;
    color: #5b6472;
    cursor: pointer;
    transition: .15s;
}

.adlg-chip:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.adlg-chip.is-on {
    background: rgba(var(--primary-rgb), .1);
    border-color: transparent;
    color: var(--primary-color);
}

.article-dialog .mud-dialog-actions .adlg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 16px;
    border-radius: 9px;
    font-family: var(--default-font-family);
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    min-width: 0;
}

/* Icon-to-text gap lives on the label, not the button root (MudBlazor#... default gap is 0). */
.article-dialog .adlg-btn .mud-button-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.article-dialog .adlg-btn .mud-button-icon-start {
    margin: 0;
}

.adlg-btn i,
.adlg-btn .mud-icon-root {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.adlg-btn-light {
    background: #fff;
    color: #4d5663;
    border: 1px solid #eef0f3;
}

.adlg-btn-light:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

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

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

@media (max-width: 560px) {
    .article-dialog .adlg-grid {
        grid-template-columns: 1fr;
    }

    .article-dialog .mud-dialog-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .article-dialog .mud-dialog-actions .adlg-btn {
        width: 100%;
    }
}