/* cpStudio MudBlazor overrides
   ---------------------------
   Keep this file tiny and well-commented. Each rule fixes a specific
   visual quirk of MudBlazor under the cpStudio dark theme. */


/* ----------------------------------------------------------------------
   1. Outlined input labels look like strikethrough on the dark theme.
      MudBlazor floats the label over the outline border but does not
      mask the segment of border behind the label text. On a dark
      surface, the border line is clearly visible through the letters.
      Give the label a small horizontal padding + a solid background
      matching the page surface so it cuts the border cleanly. */

.mud-input-control .mud-input-outlined-label.mud-input-label-outlined {
    background: var(--cpd-dark, #061221);
    padding: 0 6px;
}

/* When the label is in its 'floated above' state (after focus or value),
   ensure the same masking applies. MudBlazor adds .mud-shrink in that case. */
.mud-input-control .mud-input-label.mud-input-label-outlined.mud-shrink {
    background: var(--cpd-dark, #061221);
    padding: 0 6px;
}


/* ----------------------------------------------------------------------
   2. (removed) Card surfaces against the dark page background.

      This rule hardcoded #0d1b2e onto .mud-paper.mud-elevation-1. It was
      redundant: Mud's own .mud-paper rule already resolves to
      var(--mud-palette-surface), and PaletteDark.Surface in MudHosts.razor
      is that same #0d1b2e. Keeping it meant the colour was written in two
      places and could drift. The theme is now the only definition. */


/* ----------------------------------------------------------------------
   3. Chip text colour on the dark theme. Default has too-low contrast
      for the secondary/info chips. Bump the alpha. */

.mud-chip.mud-chip-text.mud-chip-color-default {
    color: rgba(var(--cpd-contrast-rgb), calc(0.85 * var(--cpd-text-alpha-scale)));
}


/* ----------------------------------------------------------------------
   4. DataGrid row hover — tone down the bright flash on hover. */

.mud-table-row:hover {
    background-color: rgba(246, 212, 107, 0.06) !important;
}


/* ----------------------------------------------------------------------
   5. Shared cpStudio Mud helpers.
      Promoted from Micro/HedgeReport.razor — every hedging page that
      shows a control row + a gold info hint reuses these. */

/* Pipe separator for descriptor lines (e.g. "Cash Flow | Endowment | …"). */
.cpd-pipe {
    opacity: 0.35;
    margin: 0 0.5rem;
}

/* Control row: every direct child gets a uniform 56px height (matches Mud
   outlined input). Buttons / toggles use cpd-control-btn instead. */
.cpd-control-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}
.cpd-control-row .cpd-control {
    min-width: 160px;
    height: 56px;
    box-sizing: border-box;
}
.cpd-control-row .cpd-control-btn {
    height: 56px;
    align-self: flex-end;
}
.cpd-control-spacer { flex: 1 1 auto; }

/* Gold-tinted info hint, used under val-date pickers. */
.cpd-hint {
    display: inline-block;
    background: rgba(246, 212, 107, 0.10);
    border-left: 3px solid var(--cpd-gold, #f6d46b);
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    color: rgba(var(--cpd-contrast-rgb), calc(0.85 * var(--cpd-text-alpha-scale)));
}

/* Right-align numeric columns in MudDataGrid. */
.cpd-num-col {
    text-align: right !important;
}
.cpd-num-col .mud-table-cell-content {
    justify-content: flex-end !important;
}


/* ----------------------------------------------------------------------
   6. Utility classes Bootstrap provided that MudBlazor has no equivalent
      for. Kept as utilities (rather than rewritten into MudText props at
      every call site) because they are used on plain markup, not on Mud
      components. Declarations mirror Bootstrap's, including !important,
      so removing bootstrap.min.css is a no-op for these.

      Colours come from the cpStudio tokens rather than Bootstrap's
      --bs-danger / --bs-warning, which is a deliberate change: the
      Bootstrap reds and ambers were never part of this palette. */

.text-center { text-align: center !important; }
.text-end    { text-align: right !important; }

.text-danger  { color: var(--cpd-error) !important; }
.text-warning { color: var(--cpd-warning) !important; }

.text-decoration-none { text-decoration: none !important; }
.text-reset           { color: inherit !important; }

.fw-bold { font-weight: 700 !important; }

.bg-danger { background-color: var(--cpd-error) !important; }


/* ----------------------------------------------------------------------
   7. Base rules for plain-HTML controls that Bootstrap used to provide.

      These are NOT leftovers waiting to be migrated. They back markup that
      genuinely cannot be a Mud component:
        - the #blazor-error-ui fallback banner in App.razor, which renders
          when Blazor is NOT running, so no Blazor component can style it;
        - buttons inside static-SSR Account forms that post natively.

      `.btn` had 17 usages and no base rule of our own — only the scoped
      `.auth-card .btn`. Without this block every one of them would fall
      back to the user-agent button style once bootstrap.min.css is gone.
      Colours are cpStudio tokens, not Bootstrap's greys and reds. */

.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: var(--cpd-text);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: var(--cpd-radius-sm);
    transition: color var(--cpd-transition-fast), background-color var(--cpd-transition-fast), border-color var(--cpd-transition-fast);
}

.btn:disabled,
.btn.disabled {
    pointer-events: none;
    opacity: 0.65;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: var(--cpd-radius-sm);
}

.btn-outline-light {
    color: var(--cpd-text);
    border-color: var(--cpd-border-strong);
}

.btn-outline-light:hover {
    background-color: var(--cpd-surface-hover);
}

.btn-outline-danger {
    color: var(--cpd-error);
    border-color: var(--cpd-error);
}

.btn-outline-danger:hover {
    background-color: var(--cpd-error);
    color: var(--cpd-contrast);
}

.btn-danger {
    color: var(--cpd-contrast);
    background-color: var(--cpd-error);
    border-color: var(--cpd-error);
}

.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    color: var(--cpd-contrast);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--cpd-radius-sm);
}

/* Field label for the static-SSR Account forms, which cannot use MudTextField's
   built-in Label (see the comment in Account/Pages/ExternalLogin.razor). Replaces
   Bootstrap's .form-label. */
.cpd-field-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    color: var(--cpd-text-muted);
}

/* Bootstrap's .table-responsive wrapper (overflow-x: auto). Still used as the
   scroll container around the converted MudSimpleTables on ScheduledImports and
   Trades/Import — without it those tables stop scrolling horizontally on narrow
   viewports, which is exactly the overflow problem the UI review flagged. */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ----------------------------------------------------------------------
   8. Copy-button icon state.

      cpstudioCopyFromInput used to swap an <i> element's class string to show
      a "copied!" checkmark. Icons are inline SVG now, so a class swap cannot
      change the glyph. Both icons sit in the button and CSS picks one, driven
      by the data-copied attribute the helper sets for 1.5s. Rules live here
      rather than in a scoped .razor.css because one of the call sites is the
      #blazor-error-ui banner, which renders outside any component. */

.cpd-copy-icon,
.cpd-copy-icon-done {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
}

.cpd-copy-icon-done,
[data-copied] .cpd-copy-icon {
    display: none;
}

[data-copied] .cpd-copy-icon-done {
    display: inline-block;
    color: var(--cpd-success);
}


/* ----------------------------------------------------------------------
   9. Reboot replacements — element-level styles Bootstrap applied to every
      page, not just the 28 that used its class names.

      This block is the one the class-token analysis could not have predicted.
      Bootstrap Reboot styles ELEMENTS, so deleting it changed pages nobody
      touched. Caught by diffing computed styles before and after: every route
      lost the paragraph bottom margin, the table border model, and the
      monospace stack. app.css's `*{margin:0;padding:0}` reset neutralises the
      margin half of Reboot, which is exactly why the remainder was invisible
      until measured.

      Lives here rather than app.css because MudBlazor.min.css loads after
      app.css; these need to win, and in the pre-change cascade Bootstrap's
      copies did win (Mud sets none of them). */

/* Reboot: p{margin-top:0;margin-bottom:1rem}. Without it every paragraph in
   the app ran into the next one. */
p {
    margin-bottom: 1rem;
}

/* Reboot: table{border-collapse:collapse;caption-side:bottom}. Losing this put
   raw tables back on the UA default (separate borders + 2px spacing). */
table {
    border-collapse: collapse;
    caption-side: bottom;
}

/* Reboot set these to Bootstrap's --bs-font-monospace. Deliberately pointed at
   the cpStudio mono token instead: it is the face .form-input and the recon
   grid already use, so this converges on one monospace family rather than
   restoring Bootstrap's. Visible change vs. the old rendering, by choice. */
textarea,
code,
pre,
kbd,
samp {
    font-family: var(--cpd-font-mono);
}


/* ----------------------------------------------------------------------
   10. Error alerts are unreadable in dark mode.

       Mud paints a Variant.Text alert's message with
       --mud-palette-{severity}-darken. That works for every severity we
       have except Error, because it is the only one whose palette colour
       is genuinely dark: Success/Warning/Info/Primary were all pulled
       into the gold family, so their -darken variants still measure
       7.8:1–11.9:1 against #061221, while Error's #b8324c darkens to
       #982a40 and measures 2.45:1 — the "Present value unavailable"
       alert on the counterparty page was effectively illegible.

       --cpd-error (#e74c3c) is the token app.css already keeps for
       exactly this reason (see its comment: deliberately NOT aliased to
       Mud's crimson, which is "a different colour, not a different
       spelling"). It measures 4.47:1 on the alert's tinted background.

       The same swap is needed for Mud's .mud-error-text utility, which
       paints --mud-palette-error straight onto text — the xVA lens uses
       it for every negative CVA figure, and #b8324c on #061221 is
       2.97:1, a hair under the 3:1 large-text floor for the 20px
       group totals.

       Dark mode only. PaletteLight.Error (#8c1f36) darkened against a
       near-white alert background is already high-contrast, and using
       the bright red there would be a regression. */

:root:not([data-cpd-theme="light"]) .mud-alert.mud-alert-text-error .mud-alert-message,
:root:not([data-cpd-theme="light"]) .mud-alert.mud-alert-text-error .mud-alert-icon {
    color: var(--cpd-error);
}

/* Separate rule because this one needs !important and the alert one above does
   not. Mud ships `.mud-error-text{color:var(--mud-palette-error)!important}` —
   its text-colour utilities are all declared !important so they win wherever
   they are dropped, which also means no amount of selector specificity beats
   them. Matching !important is the only option short of not using the utility
   class in the markup. */
:root:not([data-cpd-theme="light"]) .mud-error-text {
    color: var(--cpd-error) !important;
}