/* =============================================================================
   mooring-diagram.css — Q88 refresh skin for MooringDiagram.aspx

   Hosts DesktopModules/Q88/MooringDiagram.ascx — three legacy V1
   <uc:ModuleTemplate> panels rendered one at a time:

     cpSelect         — Vessel name (FleetVessel) + Vessel/Bow radio + Show.
                        Optional Email + Settings buttons in TitleRight
                        (spanOtherSettings.Visible gates them).
     cpVesselDiagram  — EMPTY TitleLeft/Right (hide bar). MainNoPadding=true
                        holds the legacy tblDiagram. Footer2: Cancel + Save +
                        Edit Diagram (LinkButtons) + Top (raw anchor).
     cpSettings       — "Mooring Diagram Settings" title. Main: rblSettings
                        radios + FleetVessel2. Footer2: Cancel + Save.

   Scoped via body.page-mooring-diagram (routed in Default.master.cs).
   ImageManager forces ImageIcon=NONE for PortalId<3, so footer buttons
   render as plain text labels — no icon swaps needed here.

   Follows DESIGN.md §6.1 (q88-card chrome), §16.1 (no card shadow), and
   Footer2 button conventions (Save=teal primary, Cancel/Edit/Top=ghost).
   ============================================================================= */

/* 1. ContentPane chain release ---------------------------------------------
   DNN wraps every module in a <table class="ContentPane"> chain that shrink-
   wraps to its widest child. Without this release, .modContainerStd (also a
   <table>) sizes to its content (~800px) instead of filling the content area
   and respecting the 48px page gutter. Mirrors the .q88-card release in
   components.css §9.2. */
body.page-mooring-diagram .DnnModule,
body.page-mooring-diagram .DnnModule > .DnnModule-MyModule,
body.page-mooring-diagram .ContentPane,
body.page-mooring-diagram table.ContentPane,
body.page-mooring-diagram table.ContentPane > tbody,
body.page-mooring-diagram table.ContentPane > tbody > tr,
body.page-mooring-diagram table.ContentPane > tbody > tr > td {
    width: 100% !important;
    max-width: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.page-mooring-diagram table.ContentPane > tbody > tr > td {
    display: block !important;
}

/* 2. Card chrome -----------------------------------------------------------
   .modContainerStd is the outer <table>. Strip its chrome and lift the
   q88-card surface onto the inner .modInnerContainer (a <div>) so we don't
   fight the table's auto-layout. */
body.page-mooring-diagram .modContainerStd {
    width: auto !important;
    max-width: none !important;
    border: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border-spacing: 0 !important;
    display: block !important;
}
body.page-mooring-diagram .modContainerStd > tbody,
body.page-mooring-diagram .modContainerStd > tbody > tr,
body.page-mooring-diagram .modContainerStd > tbody > tr > td {
    display: block !important;
    width: auto !important;
}
body.page-mooring-diagram .modContainerStd > tbody > tr > td {
    padding: 0 !important;
}

/* trAbove / trBelow above-panel rows are unused here — collapse them. */
body.page-mooring-diagram .modContainerStd .modAboveLeft,
body.page-mooring-diagram .modContainerStd .modAboveRight,
body.page-mooring-diagram .modContainerStd .modBelowLeft,
body.page-mooring-diagram .modContainerStd .modBelowRight {
    display: none !important;
}

/* The .q88-card surface lives on .modInnerContainer. */
body.page-mooring-diagram .modInnerContainer {
    background-color: var(--card-raised, #ffffff);
    border: 1px solid var(--input, #e2e8f0);
    border-radius: 8px;
    box-shadow: none;
    margin: 24px 48px;
    padding: 24px 28px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--foreground, #0f172a);
    box-sizing: border-box;
}

/* 3. Title bar -------------------------------------------------------------
   Legacy .modTitle paints navy bg + white text. Flatten to a refresh title
   line: 16/24/semibold left, optional right cluster. Hide the bar entirely
   when both panels are empty (cpVesselDiagram has no TitleLeft / TitleRight). */
body.page-mooring-diagram .modInnerContainer > .modTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent !important;
    color: var(--foreground, #0f172a) !important;
    padding: 0 0 16px 0;
    margin: 0;
    min-height: 32px;
    border: 0;
    gap: 12px;
}

/* Empty-title bar (cpVesselDiagram): both panels empty → collapse. */
body.page-mooring-diagram .modInnerContainer > .modTitle:has(> .modTLeft:empty + .modTRight:empty) {
    display: none;
}

body.page-mooring-diagram .modInnerContainer > .modTitle > .modTLeft,
body.page-mooring-diagram .modInnerContainer > .modTitle > .modTRight {
    background: transparent !important;
    color: var(--foreground, #0f172a) !important;
    padding: 0;
    margin: 0;
    float: none;
    border: 0;
}
body.page-mooring-diagram .modInnerContainer > .modTitle > .modTLeft {
    flex: 1 1 auto;
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
}
/* "Mooring Diagram Settings" title is rendered as a raw text node (not in a
   label/span). Inherit the 16/24/600 from .modTLeft. */
body.page-mooring-diagram .modInnerContainer > .modTitle > .modTLeft > span {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    color: inherit;
}
body.page-mooring-diagram .modInnerContainer > .modTitle > .modTRight {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Suppress the unused .modTitleHeader / .modSub1 panels (they show as empty
   gray bars otherwise — legacy Q88Whiteout paints them). */
body.page-mooring-diagram .modInnerContainer > .modTitleHeader:empty,
body.page-mooring-diagram .modInnerContainer > .modSub1:empty {
    display: none !important;
}

/* 4. Main panel ------------------------------------------------------------
   Body of the card. Strip the legacy slate-50 bg and Q88Whiteout padding so
   the q88-card padding (24/28) is the only spacing. */
body.page-mooring-diagram .modInnerContainer > .modMain {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0;
    color: var(--foreground, #0f172a);
}

/* The selector card's <table align="center" width="100%"> just hosts the
   row. Strip its centering and let the row flow left. */
body.page-mooring-diagram .modInnerContainer > .modMain > table {
    width: 100% !important;
    margin: 0 !important;
    border-spacing: 0 !important;
    border: 0;
}
body.page-mooring-diagram .modInnerContainer > .modMain > table > tbody > tr > td {
    padding: 0;
    vertical-align: middle;
}

/* 5. Selector card row -----------------------------------------------------
   The cpSelect <Main> renders a single row with: "Vessel name:" text,
   FleetVessel selects, "Diagram:" text, dpdDiagramType radios, Show button.
   Spread them on a flex row with consistent inline gaps. */
body.page-mooring-diagram [id$="_cpSelect_pnlMain"] > table > tbody > tr > td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 16px;
    row-gap: 12px;
    font-size: 14px;
    line-height: 20px;
}

/* FleetVessel renders inline-flex from the global skin already, but tighten
   the spacing inside the card. */
body.page-mooring-diagram [id$="_FleetVessel1"],
body.page-mooring-diagram [id$="_FleetVessel2"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.page-mooring-diagram [id$="_FleetVessel1"] select,
body.page-mooring-diagram [id$="_FleetVessel2"] select {
    box-sizing: border-box;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--input, #e2e8f0);
    border-radius: 8px;
    background-color: var(--card-raised, #ffffff);
    color: var(--foreground, #0f172a);
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
}

/* 6. RadioButtonList (Vessel/Bow + Settings radios) ------------------------
   Inline rendering (RepeatLayout="Flow", RepeatDirection="Horizontal").
   ASP.NET emits <span><input><label>… as siblings inside one outer span;
   use adjacent-sibling combinator on the input — :has() on the span would
   match all labels. (See MEMORY: ASP RadioButtonList selected-state trap.) */
body.page-mooring-diagram [id$="_dpdDiagramType"],
body.page-mooring-diagram [id$="_rblSettings"] {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: transparent;
}
body.page-mooring-diagram [id$="_dpdDiagramType"] input[type="radio"],
body.page-mooring-diagram [id$="_rblSettings"] input[type="radio"] {
    accent-color: var(--primary, #0d9488);
    width: 16px;
    height: 16px;
    margin: 0 6px 0 0;
    vertical-align: middle;
}
body.page-mooring-diagram [id$="_dpdDiagramType"] label,
body.page-mooring-diagram [id$="_rblSettings"] label {
    font-size: 14px;
    line-height: 20px;
    color: var(--foreground, #0f172a);
    margin: 0 12px 0 0;
    vertical-align: middle;
    cursor: pointer;
}
/* Selected-label emphasis (per MEMORY trap — adjacent-sibling, not :has). */
body.page-mooring-diagram [id$="_dpdDiagramType"] input[type="radio"]:checked + label,
body.page-mooring-diagram [id$="_rblSettings"] input[type="radio"]:checked + label {
    font-weight: 500;
    color: var(--accent-foreground, #1e293b);
}

/* 7. Show button (lnkShow) -------------------------------------------------
   <asp:Button CssClass="LinkButton"> renders as <input type="submit"
   class="LinkButton">. Already paints teal globally but is 29×66 — raise to
   36h / 8px radius per DESIGN.md §5.2 (primary CTA). */
/* Specificity note: components.css ships
       `body.sidebar-nav input[type="submit"]:not([class*="dx-"]):not([class*="dxb"])
        :not([class*="dxe"]):not([class*="qq-"]):not([class*="ui-"])`
   with !important on padding/border-radius/box-shadow. That's specificity
   (0,7,2). Match its :not() chain (legit anyway — these filters exclude
   DevExpress + jQuery UI controls) and add my body class to bump to
   (0,9,2) so the override wins. */
body.sidebar-nav.page-mooring-diagram input[type="submit"][id$="_lnkShow"]:not([class*="dx-"]):not([class*="dxb"]):not([class*="dxe"]):not([class*="qq-"]):not([class*="ui-"]) {
    height: 36px !important;
    min-width: 88px;
    padding: 0 16px !important;
    border-radius: 8px !important;
    border: 1px solid var(--primary, #0d9488) !important;
    background-color: var(--primary) !important;
    color: var(--primary-foreground, #eff6ff) !important;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
body.sidebar-nav.page-mooring-diagram input[type="submit"][id$="_lnkShow"]:not([class*="dx-"]):not([class*="dxb"]):not([class*="dxe"]):not([class*="qq-"]):not([class*="ui-"]):hover,
body.sidebar-nav.page-mooring-diagram input[type="submit"][id$="_lnkShow"]:not([class*="dx-"]):not([class*="dxb"]):not([class*="dxe"]):not([class*="qq-"]):not([class*="ui-"]):focus {
    background-color: var(--button-primary-hover) !important;
    border-color: var(--primary-hover, #0f766e) !important;
}

/* 8. Header actions (Email + Settings outline buttons on cpSelect) ----------
   spanOtherSettings holds two sibling <asp:LinkButton> outline buttons:
   Email (class md-email-btn, mail icon) and Settings (class md-settings-btn,
   gear icon). Both render as Figma DropdownMenu/Outline buttons (h-36,
   rounded-md, 1px #e2e8f0 border). Settings is a standalone button next to
   Email (dev parity — no kebab dropdown). */
body.page-mooring-diagram [id$="_spanOtherSettings"],
body.page-mooring-diagram .md-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* Email + Settings = outline buttons: white bg, 1px border, h-36, rounded-md,
   icon + label. MainWhiteout's `.modTRight a` paints white-on-navy — override
   fully with border-* longhands (shorthand+var cascade trap, MEMORY). */
body.sidebar-nav.page-mooring-diagram .modTRight a.md-email-btn,
body.sidebar-nav.page-mooring-diagram .modTRight a.md-email-btn:link,
body.sidebar-nav.page-mooring-diagram .modTRight a.md-email-btn:visited,
body.sidebar-nav.page-mooring-diagram .modTRight a.md-email-btn:active,
body.sidebar-nav.page-mooring-diagram .modTRight a.md-settings-btn,
body.sidebar-nav.page-mooring-diagram .modTRight a.md-settings-btn:link,
body.sidebar-nav.page-mooring-diagram .modTRight a.md-settings-btn:visited,
body.sidebar-nav.page-mooring-diagram .modTRight a.md-settings-btn:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    height: 36px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    border-top-width: 1px !important;
    border-right-width: 1px !important;
    border-bottom-width: 1px !important;
    border-left-width: 1px !important;
    border-top-style: solid !important;
    border-right-style: solid !important;
    border-bottom-style: solid !important;
    border-left-style: solid !important;
    border-top-color: #e2e8f0 !important;
    border-right-color: #e2e8f0 !important;
    border-bottom-color: #e2e8f0 !important;
    border-left-color: #e2e8f0 !important;
    background-color: #ffffff !important;
    color: var(--foreground, #0f172a) !important;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500 !important;
    text-decoration: none;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
body.sidebar-nav.page-mooring-diagram .modTRight a.md-email-btn:hover,
body.sidebar-nav.page-mooring-diagram .modTRight a.md-email-btn:focus,
body.sidebar-nav.page-mooring-diagram .modTRight a.md-settings-btn:hover,
body.sidebar-nav.page-mooring-diagram .modTRight a.md-settings-btn:focus {
    background-color: var(--secondary, #f1f5f9) !important;
    color: var(--foreground, #0f172a) !important;
}
/* Icons (Lucide), 16px, painted via mask in currentColor. */
body.sidebar-nav.page-mooring-diagram .modTRight a.md-email-btn::before,
body.sidebar-nav.page-mooring-diagram .modTRight a.md-settings-btn::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background-color: currentColor;
}
body.sidebar-nav.page-mooring-diagram .modTRight a.md-email-btn::before {
    -webkit-mask: var(--md-icon-mail) center / 16px 16px no-repeat;
    mask: var(--md-icon-mail) center / 16px 16px no-repeat;
}
body.sidebar-nav.page-mooring-diagram .modTRight a.md-settings-btn::before {
    -webkit-mask: var(--md-icon-settings) center / 16px 16px no-repeat;
    mask: var(--md-icon-settings) center / 16px 16px no-repeat;
}
body.page-mooring-diagram {
    --md-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
    --md-icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Kill the legacy <ins>&nbsp;</ins> spacer that ASP.NET LinkButton injects —
   it becomes a flex item and shifts the label off-center.
   (MEMORY: linkbutton-ins-spacer-trap.) */
body.page-mooring-diagram .modTRight a.md-email-btn > ins,
body.page-mooring-diagram .modTRight a.md-settings-btn > ins,
body.page-mooring-diagram .modFooter2 a.LinkButton > ins,
body.page-mooring-diagram .modFooter2 a[href="#top"] > ins {
    display: none !important;
}

/* 9. Footer2 — flex row, Save=teal primary, others=ghost ------------------
   cpVesselDiagram: pnlSave > Cancel + spacer + Save + Edit Diagram, plus
                    sibling pnlTop > <a href="#top">.
   cpSettings:      Cancel + spacer + Save. */
body.page-mooring-diagram .modInnerContainer > .modFooter2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--input, #e2e8f0);
    margin: 16px 0 0 0;
    padding: 16px 0 0 0;
}
body.page-mooring-diagram .modInnerContainer > .modFooter2 > asp\:Panel,
body.page-mooring-diagram .modInnerContainer > .modFooter2 > div,
body.page-mooring-diagram [id$="_pnlSave"],
body.page-mooring-diagram [id$="_pnlTop"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* Drop pnlTop to the right edge. */
body.page-mooring-diagram [id$="_pnlTop"] {
    margin-left: auto;
}
/* Hide the legacy non-breaking-space spacer span in pnlSave. */
body.page-mooring-diagram [id$="_pnlSave"] > span.Accent {
    display: none;
}

/* Default Footer2 button = ghost pill.
   components.css ships `body.sidebar-nav a.LinkButton` and a SECONDARY
   variant `body.sidebar-nav a.LinkButton.Secondary` — both at (0,3,2) and
   (0,3,2) specificity respectively. Add `.sidebar-nav` to my body-class
   chain to reach (0,4,2) so the override wins for BOTH .LinkButton and
   .LinkButton.Secondary (Cancel) in one rule.
   !important is needed on padding/border-radius/border/box-shadow because
   components.css uses !important on those properties.
   box-sizing: border-box keeps height: 36px painting a 36px box (without
   it, content-box adds padding 12 + border 2 = 50px). */
body.sidebar-nav.page-mooring-diagram .modFooter2 a.LinkButton,
body.sidebar-nav.page-mooring-diagram .modFooter2 a[href="#top"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 36px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    /* CSS shorthand+var()+!important parser trap (MEMORY): components.css
       paints these buttons via `border: 1px solid var(--button-primary-bg)
       !important` (shorthand+var). The per-side longhand serializes as
       empty. When MY rule uses `border-top-color: var(--input) !important`,
       Chrome cascading fails to honor my specificity — components.css teal
       still wins. Workaround: use the resolved hex literal directly
       (matches --input value #e5e5e5 / DESIGN.md §1 base/border #e2e8f0). */
    border-top-width: 1px !important;
    border-right-width: 1px !important;
    border-bottom-width: 1px !important;
    border-left-width: 1px !important;
    border-top-style: solid !important;
    border-right-style: solid !important;
    border-bottom-style: solid !important;
    border-left-style: solid !important;
    border-top-color: #e5e5e5 !important;
    border-right-color: #e5e5e5 !important;
    border-bottom-color: #e5e5e5 !important;
    border-left-color: #e5e5e5 !important;
    background-color: #ffffff !important;
    color: var(--foreground, #0f172a) !important;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500 !important;
    text-decoration: none;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
body.sidebar-nav.page-mooring-diagram .modFooter2 a.LinkButton:hover,
body.sidebar-nav.page-mooring-diagram .modFooter2 a.LinkButton:focus,
body.sidebar-nav.page-mooring-diagram .modFooter2 a[href="#top"]:hover,
body.sidebar-nav.page-mooring-diagram .modFooter2 a[href="#top"]:focus {
    background-color: #f5f5f5 !important;
    border-top-color: #e5e5e5 !important;
    border-right-color: #e5e5e5 !important;
    border-bottom-color: #e5e5e5 !important;
    border-left-color: #e5e5e5 !important;
    color: var(--foreground, #0f172a) !important;
}

/* Cancel = secondary FILLED (Figma node 603:13914 / 827:2120): bg #f1f5f9, no
   border, #1e293b text. btnCancel / btnSettingsCancel carry CssClass="LinkButton
   Secondary". Higher specificity than the default ghost rule above.
   Hardcoded hex (NOT var) — in this scope --secondary resolves to legacy #f5f5f5
   and --secondary-foreground to #666 (css-var cascade-loss); the var fallbacks
   never fire because the vars are defined-but-wrong. Verified via getComputedStyle. */
body.sidebar-nav.page-mooring-diagram .modFooter2 a.LinkButton.Secondary,
body.sidebar-nav.page-mooring-diagram .modFooter2 a.LinkButton.Secondary:link,
body.sidebar-nav.page-mooring-diagram .modFooter2 a.LinkButton.Secondary:visited,
body.sidebar-nav.page-mooring-diagram .modFooter2 a.LinkButton.Secondary:active {
    border-top-color: #f1f5f9 !important;
    border-right-color: #f1f5f9 !important;
    border-bottom-color: #f1f5f9 !important;
    border-left-color: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
}
body.sidebar-nav.page-mooring-diagram .modFooter2 a.LinkButton.Secondary:hover,
body.sidebar-nav.page-mooring-diagram .modFooter2 a.LinkButton.Secondary:focus {
    border-top-color: #e2e8f0 !important;
    border-right-color: #e2e8f0 !important;
    border-bottom-color: #e2e8f0 !important;
    border-left-color: #e2e8f0 !important;
    background-color: #e2e8f0 !important;
    color: var(--secondary-foreground, #1e293b) !important;
}

/* Save = teal primary. cpVesselDiagram._btnSave and cpSettings._btnSettingsSubmit
   are both bare <asp:LinkButton CssClass="LinkButton"> (no Secondary). Match
   on id-suffix instead of "no Secondary co-class" — that would also catch
   Edit Diagram. */
body.sidebar-nav.page-mooring-diagram .modFooter2 a.LinkButton[id$="_btnSave"],
body.sidebar-nav.page-mooring-diagram .modFooter2 a.LinkButton[id$="_btnSettingsSubmit"] {
    background-color: var(--primary) !important;
    border-top-color: var(--primary, #0d9488) !important;
    border-right-color: var(--primary, #0d9488) !important;
    border-bottom-color: var(--primary, #0d9488) !important;
    border-left-color: var(--primary, #0d9488) !important;
    color: var(--primary-foreground, #eff6ff) !important;
}
body.sidebar-nav.page-mooring-diagram .modFooter2 a.LinkButton[id$="_btnSave"]:hover,
body.sidebar-nav.page-mooring-diagram .modFooter2 a.LinkButton[id$="_btnSave"]:focus,
body.sidebar-nav.page-mooring-diagram .modFooter2 a.LinkButton[id$="_btnSettingsSubmit"]:hover,
body.sidebar-nav.page-mooring-diagram .modFooter2 a.LinkButton[id$="_btnSettingsSubmit"]:focus {
    background-color: var(--button-primary-hover) !important;
    border-top-color: var(--primary-hover, #0f766e) !important;
    border-right-color: var(--primary-hover, #0f766e) !important;
    border-bottom-color: var(--primary-hover, #0f766e) !important;
    border-left-color: var(--primary-hover, #0f766e) !important;
    color: var(--primary-foreground, #eff6ff) !important;
}

/* 10. Settings card body — vertical form (Figma 827:2002) -------------------
   Markup (MooringDiagram.ascx <Main>) wraps the controls in
   <div class="ms-form"> [rblSettings] <div class="ms-fleet">[FleetVessel2]</div>.
   Figma wants: radio 1, then the fleet/vessel dropdowns indented BELOW it,
   then radio 2. rblSettings is ONE RadioButtonList rendering both radios as a
   2-row <table>, so we flatten that table with display:contents and let each
   radio <tr> become a flex item of .ms-form; the .ms-fleet block is then
   interleaved between them with flex `order`. (Validated on the live DOM.) */
body.page-mooring-diagram .ms-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;                 /* radio 1 -> dropdowns = spacing/3 (Figma 12px) */
    text-align: left;
}
/* Flatten the rblSettings table so its <tr> rows participate in .ms-form's
   flex layout. Body-class + .ms-form raises specificity over §6's
   display:inline-flex on the same [id$="_rblSettings"]. */
body.page-mooring-diagram .ms-form table[id$="_rblSettings"],
body.page-mooring-diagram .ms-form table[id$="_rblSettings"] > tbody {
    display: contents;
}
body.page-mooring-diagram .ms-form table[id$="_rblSettings"] > tbody > tr > td {
    display: flex;
    align-items: center;
    padding: 0;
}
/* Visual order: radio 1 (option value="2", rendered first) -> dropdowns ->
   radio 2 (option value="1", rendered second). */
body.page-mooring-diagram .ms-form table[id$="_rblSettings"] > tbody > tr:nth-child(1) {
    order: 0;
}
body.page-mooring-diagram .ms-form .ms-fleet {
    order: 1;
    display: flex;
    align-items: center;
    gap: 12px;                 /* between the two selects = Figma 12px */
    margin-left: 24px;         /* indent under the radio label = Figma Field x=24 */
}
body.page-mooring-diagram .ms-form table[id$="_rblSettings"] > tbody > tr:nth-child(2) {
    order: 2;
    margin-top: 15px;          /* +12px gap = 27px dropdowns -> radio 2 (Figma) */
}
/* Dropdown chrome — Figma Field 175px wide, h32, rounded-md, 1px #e2e8f0.
   FleetVessel2 emits the selects directly (no _FleetVessel2 wrapper), so scope
   by .ms-fleet instead of the §5 [id$="_FleetVessel2"] selector. */
body.page-mooring-diagram .ms-fleet select {
    box-sizing: border-box;
    height: 32px;
    width: 175px;
    padding: 0 12px;
    border: 1px solid var(--input, #e2e8f0);
    border-radius: 8px;
    background-color: #ffffff;
    color: var(--foreground, #0f172a);
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
}
/* Disabled (radio 2 selected -> hideDDLs sets class="Disabled") keeps the chrome
   but dims to read as inactive. Hardcoded hex — --muted / --muted-foreground
   resolve to legacy #fff / #0f172a here (css-var cascade-loss), so the var
   fallbacks never fire. (Not in Figma 827:2002, which shows the enabled state;
   kept because the legacy code flags this control disabled on purpose.) */
body.page-mooring-diagram .ms-fleet select.Disabled {
    /* !important to beat components.css `body.sidebar-nav select { color:
       var(--text-primary) !important }` (the file-wide MainWhiteout/components
       !important war). */
    color: #94a3b8 !important;
    background-color: #f8fafc !important;
}

/* 11. Diagram editor / viewer — diagram-left / palette-right (refresh design) -
   MainNoPadding=true already removes legacy .modMain padding. BOTH the edit
   render (.md-editor) and the read-only view render (.md-editor.md-viewer)
   wrap the server diagram grid + item palette/legend + Notes in
   .md-editor / .md-diagram / .md-palette / .md-notes (emitted in
   MooringDiagram.ascx.cs, per Figma node 603:9175). Keep the horizontal
   overflow guard for the wide vessel hull grid. */
body.page-mooring-diagram [id$="_cpVesselDiagram_pnlMain"] {
    overflow-x: auto;
    overflow-y: hidden;
}
body.page-mooring-diagram [id$="_cpVesselDiagram_pnlMain"] table[id$="_tblDiagram"] {
    width: 100%;
    margin: 0;
}

/* Editor row: diagram left, item palette right. Center the (shorter) diagram
   vertically against the taller palette, matching the Figma balance. */
body.page-mooring-diagram .md-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 48px;
}
body.page-mooring-diagram .md-diagram {
    flex: 0 1 auto;
    min-width: 0;
}
body.page-mooring-diagram .md-diagram table {
    margin: 0;
}
body.page-mooring-diagram .md-palette {
    flex: 0 0 440px;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* The legacy diagram cell carries align="center"; reset to left so the
       palette text (item names, instructions) reads left-aligned per Figma. */
    text-align: left;
}

/* Item palette grid: 2 columns, column-first fill (8 rows), 8px / 16px gaps. */
body.page-mooring-diagram .md-palette-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(8, auto);
    grid-auto-flow: column;
    gap: 8px 16px;
}
/* Item row = <label> wrapping the (visually hidden) imgoption radio + icon + name. */
body.page-mooring-diagram .md-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    height: 44px;
    padding: 10px;
    border: 1px solid var(--input, #e2e8f0);
    border-radius: 6px;
    background-color: var(--card-raised, #ffffff);
    cursor: pointer;
    overflow: hidden;
    transition: background-color 120ms ease, border-color 120ms ease;
}
body.page-mooring-diagram .md-item-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}
body.page-mooring-diagram .md-item-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}
body.page-mooring-diagram .md-item-icon > img {
    max-width: 24px;
    max-height: 24px;
    width: auto;
    height: auto;
}
body.page-mooring-diagram .md-item-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--foreground, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.page-mooring-diagram .md-item:hover {
    border-color: var(--primary, #0d9488);
}
/* Selected item (imgoption radio :checked → set natively + by Diagram.js
   SetItem) → teal row, white name, white icon backing for the line-art gif. */
body.page-mooring-diagram .md-item:has(.md-item-radio:checked) {
    background-color: var(--primary, #0d9488);
    border-color: var(--primary, #0d9488);
}
body.page-mooring-diagram .md-item:has(.md-item-radio:checked) .md-item-name {
    color: #ffffff;
    font-weight: 600;
}
body.page-mooring-diagram .md-item:has(.md-item-radio:checked) .md-item-icon {
    background-color: #ffffff;
    border-radius: 4px;
}

/* Instruction line under the palette. */
body.page-mooring-diagram .md-instructions {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--muted-foreground, #475569);
}

/* Notes — label + bordered textarea, full width below the editor row. */
body.page-mooring-diagram .md-notes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 24px;
    text-align: left;
}
body.page-mooring-diagram .md-notes-label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--foreground, #0f172a);
}
body.page-mooring-diagram .md-notes-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 72px;
    padding: 8px 12px;
    border: 1px solid var(--input, #e2e8f0);
    border-radius: 8px;
    background-color: var(--card-raised, #ffffff);
    color: var(--foreground, #0f172a);
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    resize: vertical;
}
body.page-mooring-diagram .md-notes-input::placeholder {
    color: var(--muted-foreground, #475569);
}
body.page-mooring-diagram .md-notes-input:focus {
    outline: none;
    border-color: var(--primary, #0d9488);
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.15);
}

/* 11b. View mode (read-only) -----------------------------------------------
   Reuses the editor layout (hull left, equipment key right). The legend mirrors
   the palette rows but is static — kill the pointer cursor and teal hover so it
   doesn't read as interactive. */
body.page-mooring-diagram .md-legend .md-item {
    cursor: default;
}
body.page-mooring-diagram .md-legend .md-item:hover {
    border-color: var(--input, #e2e8f0);
}
/* Vessel dimensions caption under the hull (LOA / Beam / depth). */
body.page-mooring-diagram .md-dim-caption {
    margin: 8px 0 0 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--muted-foreground, #475569);
    text-align: center;
}
/* Read-only Notes block — mirrors .md-notes-input chrome, non-editable. */
body.page-mooring-diagram .md-notes-view {
    box-sizing: border-box;
    width: 100%;
    min-height: 72px;
    padding: 8px 12px;
    border: 1px solid var(--input, #e2e8f0);
    border-radius: 8px;
    background-color: var(--secondary, #f1f5f9);
    color: var(--foreground, #0f172a);
    font-size: 14px;
    line-height: 20px;
}

/* 12. Validation message ---------------------------------------------------
   The FleetVessel "Please select a vessel" validator renders as
   <span class="ValHighlight">. Make it red-foreground, not block-level so it
   sits inline next to the dropdown. */
body.page-mooring-diagram .modMain .ValHighlight {
    color: var(--destructive, #dc2626);
    font-size: 13px;
    line-height: 16px;
    margin-left: 8px;
}

/* 13. Pin legacy page footer to the bottom of .q88-content ----------------
   The legacy <footer> (navy `#4F72A4` bar with "Copyright ©... Veson
   Nautical" 12px text) lives inside <tr id="ctl00_trFooterRow"> at the end
   of the DNN `<table class="ContentPane">` chain. When the diagram is short
   (cpSelect-only view, no Bow diagram, etc.), the footer sits right below
   the card — mid-viewport, not at the bottom.

   Other refresh pages (Inspections, …) have naturally tall content (data
   grids) that pushes the footer down via document flow. MooringDiagram is
   intentionally short, so document flow alone doesn't reach the bottom.

   Fix: turn the ContentPane chain into a flex column scoped to this page.
   `.q88-content` is already `flex: 1` (navigation.css §11), so the
   ContentPane fills the full viewport-minus-header height. Making tbody a
   flex column lets `margin-top: auto` on trFooterRow shove the footer to
   the bottom of the column. ContentPane is already `display: block` from a
   parent rule — overriding to flex is safe. */
body.page-mooring-diagram .q88-content > table.ContentPane {
    display: flex !important;
    flex-direction: column;
    min-height: 100%;
}
body.page-mooring-diagram .q88-content > table.ContentPane > tbody {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
}
body.page-mooring-diagram .q88-content > table.ContentPane > tbody > tr#ctl00_trFooterRow {
    margin-top: auto;
}