/* Ports — the second page (after Vessel Edit) to use the GridCard/DetailTemplate row-expand-to-edit
   pattern (see css/vessels.css for that pattern's own history). No Figma mock exists for this page
   either; styling is composed the same way Vessels was, from the app's existing tokens/card language. */

/* Wraps PortDetailPanel (Components/Ports/Ports.razor's DetailTemplate) — same purpose as
   .lh-vessel-detail-panel: PortDetailPanel has no card chrome of its own, so this is the only container
   around it, supplying the panel's margin from Kendo's own detail-row cell edges. No horizontal padding
   of our own, for the same reason as Vessels: Kendo's .k-detail-cell already carries a fixed 16px
   left/right padding on both sides. */
.lh-port-detail-panel {
    padding: var(--kendo-spacing-6) 0;
}

/* Same hover-background removal as .lh-vessel-grid's own detail row — the expanded row's form shouldn't
   shift color on hover like a real (clickable) master row does. */
.lh-port-grid .k-detail-row:hover {
    background-color: transparent !important;
}

/* Same equal-share squash as everywhere else in this app (.lh-card-toolbar>*, .lh-pager>*, ...): this
   StackLayout (Ports.razor's row-actions cell, wrapping the Edit + Deactivate/Reactivate buttons) sets
   no HorizontalAlign/VerticalAlign, so Kendo's default stretch alignment gives each button flex:1 0 0%
   and splits the column's width evenly between them instead of sizing to their own content — confirmed
   live, the Edit button was rendering at 132px and the icon-only Deactivate button at 122px (should be
   ~59px/~32px, matching Vessels' own Edit button and a plain icon button elsewhere in the app). */
.lh-port-row-actions>* {
    flex: 0 0 auto;
}