/* ==========================================================================
   MP Legacy — web rebuild of the PowerApps canvas app.

   The original is a 1365 x 768 canvas app with absolutely-positioned Classic
   controls. Every colour, coordinate and size in here is taken verbatim from
   the PowerApps export YAML so the rebuild matches the original pixel for
   pixel. The canvas is scaled to the viewport the same way the PowerApps
   player does it (fit, preserving aspect ratio).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    /* Straight out of the export: RGBA(56,96,178,1) etc. */
    --blue:        #3860b2;
    --blue-hover:  #2a4a8b;   /* ColorFade(Fill, -20%) */
    --maroon:      #760000;
    --navy:        #00126b;
    --grey-icon:   #747474;   /* RGBA(116,116,116,1) — print / back icons */
    --row-hover:   rgba(186, 202, 226, .2);
    /* Sampled off the source screenshots: the DataTable's selected row. */
    --row-select:  #d7dff0;
    --panel:       #f1f4f9;   /* RGBA(241,244,249,1) — Comments_Rectangle */
    --form-panel:  #ededed;   /* RGBA(237,237,237,1) — Maintenance edit forms */
    --adv-panel:   #fcfce8;   /* RGBA(252,252,232,1) — advanced filter sheet */
    --scrim:       rgba(0, 0, 0, .64);
    --disabled:    #a6a6a6;   /* RGBA(166,166,166,1) */

    --canvas-w: 1365px;
    --canvas-h: 768px;
    --scale: 1;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #ffffff;
    font-family: 'Open Sans', 'Segoe UI', sans-serif;
    overflow: hidden;
}

/* The purple app frame visible around the PowerApps player in the source
   screenshots. */
body { background: #742774; }

#viewport {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}

.canvas {
    position: relative;
    width: var(--canvas-w);
    height: var(--canvas-h);
    background: #ffffff;
    transform: scale(var(--scale));
    transform-origin: top center;
    overflow: hidden;
    flex: 0 0 auto;
}

/* Screens that legitimately run past the canvas height (long report lists)
   get their own internal scroller rather than growing the canvas. */
.canvas.scrolls { overflow: visible; }

/* --------------------------------------------------------------------------
   Header component (Src/Components/Header.pa.yaml)
   Logo X=5 Y=5 W=252 | title Y=0 H=48 size 28 | subtitle Y=43 H=32 size 20
   rule Y=121 H=2 fill navy | print icon X=1328 Y=40 | back icon X=1328 Y=5
   -------------------------------------------------------------------------- */

.hdr { position: absolute; left: 0; top: 0; width: 1365px; height: 123px; background: #fff; }
.hdr .logo   { position: absolute; left: 5px; top: 5px; width: 252px; }
.hdr .title  { position: absolute; left: 290px; top: 0;    width: 1075px; height: 48px;
               text-align: center; font-size: 37.33px; font-weight: 600; color: #000;
               line-height: 48px; white-space: nowrap; }
.hdr .subtitle { position: absolute; left: 290px; top: 43px; width: 1075px; height: 32px;
               text-align: center; font-size: 26.67px; font-weight: 600; color: #000;
               line-height: 32px; white-space: nowrap; }
.hdr .rule   { position: absolute; left: 0; top: 121px; width: 1365px; height: 2px; background: var(--navy); }

.hdr .icon   { position: absolute; left: 1328px; width: 30px; height: 30px;
               color: var(--grey-icon); background: none; border: 0; padding: 0;
               cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hdr .icon svg { width: 26px; height: 26px; fill: currentColor; }
.hdr .icon.back  { top: 5px; }
.hdr .icon.print { top: 40px; }
.hdr .icon:hover { color: #000; }

/* Version label — Dashboard only, top-left, red, italic-free (Ver: 1.004) */
.ver-label { position: absolute; left: 6px; top: 2px; font-size: 14.67px; color: #c00; z-index: 5; }

/* --------------------------------------------------------------------------
   Navigation buttons — Y=84, H=34, W=160, Size=14, spaced 187 apart
   Selected page uses maroon; the original does this with
   If(Left(Parent.Name,7) = Left(Self.Text,7), maroon, blue)
   -------------------------------------------------------------------------- */

.nav a {
    position: absolute;
    top: 84px;
    width: 160px;
    height: 34px;
    border-radius: 5px;
    background: var(--blue);
    color: #fff;
    font-size: 18.67px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, .12);
}
.nav a:hover     { background: var(--blue-hover); }
.nav a.on        { background: var(--maroon); }
.nav a.on:hover  { background: var(--maroon); }

.nav .n1 { left: 353px; }
.nav .n2 { left: 540px; }
.nav .n3 { left: 727px; }
.nav .n4 { left: 914px; }
.nav .n5 { left: 1103px; }

/* --------------------------------------------------------------------------
   Classic controls
   -------------------------------------------------------------------------- */

.btn {
    position: absolute;
    background: var(--blue);
    color: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 5px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.15;
    padding: 2px 6px;
    /* PowerApps buttons don't reflow their caption — where the original wraps,
       the markup carries an explicit <br> (which still breaks under nowrap). */
    white-space: nowrap;
}
.btn:hover { background: var(--blue-hover); }
.btn:disabled,
.btn.is-disabled {
    background: #fff;
    color: var(--disabled);
    border: 1px solid var(--disabled);
    cursor: default;
    pointer-events: none;
}

/* Classic TextInput / DropDown */
.tin, .ddl {
    position: absolute;
    font-family: inherit;
    font-size: 16px;
    border: 1px solid var(--navy);
    background: #fff;
    color: #000;
    padding: 2px 6px;
}
.tin:focus, .ddl:focus { outline: 2px solid var(--blue); outline-offset: -2px; }

.ddl:disabled, .tin:disabled {
    background-color: #f4f4f4;
    color: var(--disabled);
    border-color: var(--disabled);
}
.ddl:disabled {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M3 6h10L8 12z'/></svg>"),
        linear-gradient(var(--disabled), var(--disabled));
}

/* PowerApps classic dropdowns draw a solid blue chevron block on the right */
.ddl {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    /* The arrow layer must come FIRST — the first background-image is painted
       on top, so listing the blue block first hid the chevron entirely. */
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M3 6h10L8 12z'/></svg>"),
        linear-gradient(var(--blue), var(--blue));
    background-repeat: no-repeat, no-repeat;
    background-position: right 7px center, right 0 center;
    background-size: 14px 14px, 28px 100%;
}

.lbl { position: absolute; font-size: 16px; color: #000; display: flex; align-items: center; }
.lbl.right  { justify-content: flex-end; }
.lbl.center { justify-content: center; }
.lbl.italic { font-style: italic; }

/* Screen title + the maroon underline rule used on every sub-screen
   (Rectangle W=500 H=2 fill RGBA(118,0,0,1)) */
.scr-title { position: absolute; left: 433px; top: 141px; width: 500px; height: 40px;
             text-align: center; font-size: 24px; color: #000; }
.scr-rule  { position: absolute; left: 433px; top: 185px; width: 500px; height: 2px; background: var(--maroon); }
.scr-sub   { position: absolute; left: 333px; top: 190px; width: 700px; height: 26px;
             text-align: center; font-size: 16px; color: #000; }

/* --------------------------------------------------------------------------
   DataTable — HeadingFill blue, HeadingColor white, HeadingSize 12, Size 11
   HoverFill RGBA(186,202,226,.2), SelectedFill RGBA(56,96,178,.2)
   -------------------------------------------------------------------------- */

.dt { position: absolute; border: 1px solid var(--navy); overflow: auto; background: #fff; }
/* PowerApps gives every DataTableColumn a HARD width (see pa_col_widths in
   lib/helpers.php) and clips anything that doesn't fit — it never grows a
   column to suit its content. `table-layout: fixed` is what reproduces that;
   an auto-layout table silently redistributes the widths and ends up showing a
   different number of columns on screen than the original does. */
/* NB: `table-layout: fixed` on its own is not enough — with `width: auto` the
   browser still sizes the TABLE from its content and only then divides that up,
   so every column ends up wider than declared. Each screen sets an explicit
   pixel width on the <table> (the sum of its column widths). */
.dt table { border-collapse: collapse; table-layout: fixed; font-size: 14.67px; }
.dt th, .dt td { overflow: hidden; text-overflow: ellipsis; }
.dt thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--blue); color: #fff;
    font-size: 16px; font-weight: 400;
    text-align: center; padding: 8px 10px;
    white-space: nowrap; border: 0;
}
.dt thead th a { color: #fff; text-decoration: none; display: block; }
.dt tbody td { padding: 7px 10px; white-space: nowrap; border: 0; color: #000; }
.dt tbody tr:hover   { background: var(--row-hover); }
.dt tbody tr.sel     { background: var(--row-select); }
.dt tbody td.edit    { text-align: center; }
.dt tbody td.edit a  { color: var(--blue); text-decoration: none; font-weight: 600; }
.dt .empty { text-align: center; padding: 14px; color: #555; font-size: 14.67px; }

/* "473 listed" counter. The label is only 58px wide in the export, so the
   original wraps it onto two lines ("473" / "listed") — keep that. */
.rowcount { position: absolute; font-style: italic; font-weight: 600; font-size: 14.67px;
            line-height: 1.15; }

/* --------------------------------------------------------------------------
   Report card lists (Birthday / Mailing / Christmas Bag / Beneficiary list)
   -------------------------------------------------------------------------- */

.cardlist { position: absolute; overflow-y: auto; background: #f7f7f7; border: 0; }
.card { padding: 10px 14px; border-bottom: 1px solid var(--blue); }
.card:last-child { border-bottom: 0; }
.card .nm { font-size: 18.67px; font-weight: 600; color: #000; }
.card .row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.card .fl  { font-size: 14.67px; color: #000; }
.card .fv,
.fv        { font-size: 14.67px; background: #fff; border: 0; padding: 4px 8px;
             display: flex; align-items: center;
             /* PowerApps text inputs clip; they never reflow onto a second line,
                so a long Institution must not make the card taller. */
             white-space: nowrap; overflow: hidden; }

/* --------------------------------------------------------------------------
   Beneficiary list for a legatee — two-column grid of grey panels
   -------------------------------------------------------------------------- */

.benefgrid { position: absolute; overflow-y: auto; }
.benefgrid .g { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; padding: 4px; }
.bcard .bnm { font-size: 20px; font-weight: 600; color: #000; padding-bottom: 3px; }
.bcard .brule { height: 2px; background: var(--maroon); width: 92%; margin-bottom: 8px; }
.bcard .bgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; }
.bcard .cell { background: #efefef; padding: 6px 8px; font-size: 13.33px; min-height: 30px; }
.bcard .cell b { font-weight: 700; }

/* Totals strip: Widows / Children / PWD / Total */
.totstrip { position: absolute; display: flex; gap: 14px; }
.totstrip div { flex: 1; text-align: center; font-size: 21.33px; padding: 8px 0; }
.tot-widow { background: #fddecf; }   /* RGBA(253,222,207,1) */
.tot-child { background: #cce7f6; }   /* RGBA(204,231,246,1) */
.tot-pwd   { background: #e8f4d9; }   /* RGBA(232,244,217,1) */
.tot-all   { background: #e3eaf3; }   /* RGBA(227,234,243,1) */

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */

.panel { position: absolute; background: var(--panel); }
/* Maintenance edit forms are RGBA(237,237,237,1), not the Comments blue-grey. */
.formpanel { position: absolute; background: var(--form-panel); }
.panel .ptitle { text-align: center; font-size: 21.33px; font-weight: 600; padding-top: 8px; }
.panel .prule  { height: 2px; background: var(--maroon); width: 260px; margin: 4px auto 0; }
.panel .psub   { text-align: center; font-size: 17.33px; }

.beneftable { width: 88%; margin: 12px auto 0; border-collapse: collapse; font-size: 18.67px; }
.beneftable th { font-weight: 400; font-size: 17.33px; padding: 6px; text-align: center; }
.beneftable td { padding: 7px 6px; text-align: center; font-weight: 600; }
.beneftable td:first-child { font-weight: 700; }
.beneftable tr.r-widow td { background: #fddecf; }
.beneftable tr.r-child td { background: #cce7f6; }
.beneftable tr.r-pwd   td { background: #e8f4d9; }
.beneftable tr.r-gth   td { background: #f7e8ff; }
.beneftable tr.r-total td { background: #e3eaf3; }

.app-updated { position: absolute; left: 8px; top: 748px; font-size: 14.67px; font-style: italic; color: #333; }

/* --------------------------------------------------------------------------
   Advanced filter overlay (Beneficiaries + Legatees)
   Scrim RGBA(0,0,0,.64) Y=278 H=490 | sheet X=81 Y=305 W=1204 H=409 fill #fcfce8
   -------------------------------------------------------------------------- */

.scrim { position: absolute; left: 0; top: 278px; width: 1366px; height: 490px; background: var(--scrim); z-index: 40; }
.advsheet { position: absolute; left: 81px; top: 305px; width: 1204px; height: 409px;
            background: var(--adv-panel); border: 1px solid var(--navy); z-index: 41; }

/* --------------------------------------------------------------------------
   Record form (Beneficiary / Legatee view+edit)
   Field labels are 11pt navy-ish; inputs are white boxes on a grey field.
   -------------------------------------------------------------------------- */

.formbg { position: absolute; left: 0; top: 123px; width: 1272px; height: 645px; background: #ebebeb; overflow-y: auto; }
.fform { position: relative; padding: 10px 0 24px; }
.fld { position: absolute; }
/* Sizes are the export's, converted pt -> px (x4/3):
     DataCardKey   (label) Size=7 ->  9.33px
     DataCardValue         Size=9 -> 12px
     Division dropdown     Size=8 -> 10.67px  (.fld.sm, the one exception)
   Measured off Judd's screenshots to confirm: "Enrolled" is 44.1 canvas px
   wide in the original and was 59.4 here, i.e. this was running 35% oversized. */
.fld label { display: block; font-size: 9.33px; color: #21365f; margin-bottom: 2px; }
.fld .val, .fld input, .fld select, .fld textarea {
    display: block; width: 100%; font-family: inherit; font-size: 12px;
    background: #fff; border: 0; padding: 5px 8px; height: 30px; color: #000;
}
.fld.sm .val, .fld.sm select { font-size: 10.67px; }
/* Fees Exempt / NPC Required are toggleSwitch controls with no fill, so in
   view mode the original shows bare "Off"/"On" with no white box. */
.fld .toggleval { background: none; border-color: transparent; }
/* PowerApps text inputs clip rather than wrap, so a long Division stays on one
   line instead of pushing into the row below. */
.fld .val { white-space: nowrap; overflow: hidden; text-overflow: clip;
            line-height: 20px; }
.fld input, .fld select, .fld textarea { border: 1px solid #c8c8c8; }
.fld .val { border: 1px solid transparent; }

/* Right-hand action rail */
.rail { position: absolute; left: 1272px; top: 123px; width: 93px; height: 645px; background: #fff; }
.rail .btn { position: static; width: 100%; height: 52px; margin: 0 0 14px; font-size: 17.33px; }
.rail .pad { padding: 14px 8px; }
.rail .sect { margin-top: 10px; }
.rail .sect .hd { background: #b8cce4; font-size: 13.33px; font-weight: 700; padding: 3px 6px; }
.rail .sect .bd { text-align: center; font-size: 16px; padding: 8px 4px; border-bottom: 1px solid #ddd; }

/* Comments overlay */
.cmtwrap { position: absolute; left: 22px; top: 145px; width: 1225px; height: 610px;
           background: var(--panel); border: 1px solid #ccc; z-index: 30; }
.cmtwrap h2 { text-align: center; font-size: 24px; font-weight: 600; margin: 14px 0 0; }
.cmtlist { position: absolute; left: 14px; top: 62px; right: 14px; bottom: 14px;
           background: #f2f5f9; border: 1px solid #dde3ec; overflow-y: auto; }
.cmtlist .c { padding: 8px 12px; border-bottom: 1px solid #e3e8f0; font-size: 14.67px; }
.cmtlist .c .d { font-weight: 700; }
.cmtlist .none { padding: 14px; color: #555; font-size: 14.67px; }

/* --------------------------------------------------------------------------
   Menu screens (Reports / Maintenance) — big tiles
   Reports: 4 across at X=50,333,616,899(ish) W=267 H=109, Y=245 and Y=395
   -------------------------------------------------------------------------- */

.tile {
    position: absolute; width: 267px; height: 109px;
    background: var(--blue); color: #fff; border-radius: 5px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    /* The original's label runs almost to the tile edge — with 14px of padding
       "Enrolled but not allocated to" wrapped a word early. */
    font-size: 21.33px; font-weight: 600; text-decoration: none; padding: 6px 5px;
    line-height: 1.2;
}
.tile:hover { background: var(--blue-hover); }

/* --------------------------------------------------------------------------
   Login (not part of the PowerApps app — replaces MS SSO for now)
   -------------------------------------------------------------------------- */

.login-wrap { position: absolute; left: 0; top: 123px; width: 1365px; height: 645px;
              display: flex; align-items: flex-start; justify-content: center; padding-top: 90px; }
.login-box  { width: 420px; background: var(--panel); border: 1px solid var(--navy); padding: 26px 30px 30px; }
.login-box h2 { margin: 0 0 4px; text-align: center; font-size: 24px; font-weight: 600; }
.login-box .rule { height: 2px; background: var(--maroon); width: 220px; margin: 0 auto 20px; }
.login-box label { display: block; font-size: 14.67px; color: #21365f; margin: 12px 0 4px; }
.login-box input { width: 100%; font-family: inherit; font-size: 17.33px; padding: 8px 10px;
                   border: 1px solid var(--navy); background: #fff; }
.login-box button { width: 100%; margin-top: 22px; height: 42px; background: var(--blue);
                    color: #fff; border: 0; border-radius: 5px; font-family: inherit;
                    font-size: 18.67px; font-weight: 600; cursor: pointer; }
.login-box button:hover { background: var(--blue-hover); }
.login-err { background: #fde7e9; border: 1px solid #a80000; color: #a80000;
             padding: 8px 10px; font-size: 14.67px; margin-top: 14px; }

/* Read-only banner — shown when the DB login has no write permission */
.ro-banner { position: absolute; left: 0; top: 123px; width: 1365px; z-index: 60;
             background: #fff4ce; border-bottom: 1px solid #d7b500; color: #6b5900;
             font-size: 14.67px; padding: 5px 12px; text-align: center; }
.ro-banner b { font-weight: 700; }

/* Toast used for read-only save attempts */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
         background: #323130; color: #fff; font-size: 15px; padding: 12px 20px;
         border-radius: 4px; z-index: 200; box-shadow: 0 4px 14px rgba(0,0,0,.3); }

/* Printing: drop the scaling and the chrome so Ctrl-P / the print icon give a
   usable page, which is what Print() does in the original. */
@media print {
    body { background: #fff; }
    #viewport { position: static; display: block; overflow: visible; }
    .canvas { transform: none; width: auto; height: auto; overflow: visible; }
    .nav, .hdr .icon, .ro-banner { display: none !important; }
    .dt, .cardlist, .benefgrid, .formbg { position: static; height: auto; max-height: none; overflow: visible; }
}

/* --------------------------------------------------------------------------
   Chart legends — the PowerApps Legend is a control of its own sitting beside
   the chart, so it is rendered separately rather than inside the canvas.
   -------------------------------------------------------------------------- */

.legend { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.legend .lgi { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: #000; }
.legend .lgi i { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto; }

/* Multi-column legend (Legatee Service sits under its pie in 4 columns).
   PowerApps fills this ROW by row — reading the source screenshot across gives
   Air force, Army, Army/JL, then JL, Navy, RAN, WRANS. grid-auto-flow: column
   put them down the columns instead, so every swatch paired with the wrong
   label position. */
.legend-grid { display: grid; grid-auto-flow: row;
               grid-template-columns: repeat(var(--legend-cols, 4), 1fr);
               gap: 3px 8px; align-content: center; }
.legend-grid .lgi i { width: 9px; height: 9px; }