/* ==========================================================================
   Port shim — loaded AFTER site.css, which is kept byte-identical to the
   .NET site. Nothing here changes the design; it re-creates one .NET layout
   behaviour that depended on a WebForms artefact.

   The .NET master wrapped header + nav + content + footer in a single
   <form runat="server">, and site.css styles the `form` SELECTOR as the white
   page card:

       form { background:#fff; margin:20px auto; padding:20px;
              border:1px solid #d7d7d7; box-shadow:none; border-radius:0; }

   FastAPI has no page-wide postback form, so that card disappeared and the grey
   page background showed through. Worse, every discrete form we do have (login
   dropdown, logout, change/forgot password) was picking up the card styling.

   So: neutralise `form`, and move the card onto an explicit .page-shell wrapper.
   ========================================================================== */

/* 1) Forms are ordinary controls again, not the page shell. */
form {
    background: none;
    margin: 0;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* 2) The page card, with the exact values site.css computed for `form`
      (the later override in site.css wins: square corners, no shadow, crisp edge). */
.page-shell {
    background: #fff;
    margin: 20px auto;
    max-width: 100%;
    padding: 20px;
    border: 1px solid #d7d7d7;
    border-radius: 0;
    box-shadow: none;

    /* Fill the viewport so short pages don't leave the footer floating mid-screen
       with grey below it. 44px = body's padding-top for the fixed contact bar,
       40px = this element's 20px top + 20px bottom margin. Bootstrap's global
       border-box means padding and border are already inside min-height. */
    min-height: calc(100vh - 84px);
    display: flex;
    flex-direction: column;
}

/* 3) The content region absorbs the slack, which pushes the footer to the bottom
      on short pages without pinning it on long ones. */
.page-body {
    flex: 1 0 auto;
}


/* --- Chart.js canvas containers -------------------------------------------
   Every chart uses maintainAspectRatio:false, which makes Chart.js size the canvas
   to its PARENT. If that parent has no height of its own it grows to fit the canvas,
   which then grows to fit the parent — a feedback loop that ran away to 44,000px on
   the audit dashboard before this was caught.

   The wrapper below is the height. The canvas's own height attribute is ignored once
   responsive:true is set, so it is not used. Keep charts inside one of these. */
.chart-box { position: relative; width: 100%; }
.chart-box > canvas { display: block; }
.chart-sm  { height: 200px; }
.chart-md  { height: 260px; }
.chart-lg  { height: 320px; }