/* Operational page canvas. Loaded only outside the flight purchase/print flow.
   The shell owns outer gutters; panels own inner gutters; components retain their styling. */
.portal-layout {
    --page-gutter: 24px;
    --page-block: 24px;
    --page-panel-padding: 24px;
    --page-section-gap: 12px;
    background: #fff;
}
.portal-layout .portal-page {
    min-width: 0;
    width: 100%;
    padding: var(--page-block) var(--page-gutter);
    background: #fff;
}
.portal-layout .portal-content {
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
}
.portal-layout .portal-content--narrow { max-width: 720px; margin-inline: auto; }
.portal-layout .portal-page > :is(.content-card, .portal-container),
.portal-layout .portal-content > .content-card {
    min-width: 0;
    padding: var(--page-panel-padding);
    background: #fff;
}
/* Existing master-console padding is important; keep this override equally scoped. */
.portal-layout .portal-page > .master-console { padding: var(--page-panel-padding) !important; }
.portal-layout .portal-page > :is(.content-card, .portal-container) > :is(.portal-page-hero, .namo-page-hero),
.portal-layout .portal-content > .content-card > :is(.portal-page-hero, .namo-page-hero) {
    margin: calc(-1 * var(--page-panel-padding)) calc(-1 * var(--page-panel-padding)) var(--page-section-gap);
    padding-inline: var(--page-panel-padding);
}
.portal-layout .portal-page > :is(.content-card, .portal-container) {
    gap: 0;
}
.portal-layout .portal-page > :is(.content-card, .portal-content, .portal-section, .row, .alert, .portal-page-hero),
.portal-layout .portal-section {
    margin-block-end: var(--page-section-gap);
}
.portal-layout .portal-page > :is(.content-card, .portal-container) > :is(section, .portal-action-bar, .table-responsive) {
    margin-block-end: var(--page-section-gap);
}
.portal-layout .portal-section:last-child,
.portal-layout .portal-page > :is(.content-card, .portal-content, .portal-section):last-child { margin-bottom: 0; }
.portal-layout .portal-page > :is(.content-card, .portal-container) > :is(section, .portal-action-bar, .table-responsive):last-child { margin-bottom: 0; }
.portal-layout :is(.portal-content, .portal-page, .portal-page > .content-card) > .row:not(form) {
    --bs-gutter-x: var(--page-section-gap);
    --bs-gutter-y: var(--page-section-gap);
}
.portal-layout .portal-auth-shell { padding: var(--page-block) var(--page-gutter); }
.portal-layout .agency-management-hero > div {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
/* Configuration screens already receive padding from their outer panel. */
.portal-layout .portal-page > .master-console > .platform-content {
    padding: 0;
    background: #fff;
}
/* Normalize page-section utilities without changing spacing inside forms/cards.
   Bootstrap margin utilities are important, so these narrow overrides must be too. */
.portal-layout .portal-page > .content-card.mb-3,
.portal-layout .portal-page > .content-card.mb-4,
.portal-layout .portal-page > .content-card > :is(.card, .row, form, .table-responsive):is(.mb-3, .mb-4),
.portal-layout .portal-page > .master-console > .platform-content > :is(.card, .row, form, .table-responsive):is(.mb-3, .mb-4) {
    margin-bottom: var(--page-section-gap) !important;
}
/* Detail pages are vertical grids: the grid owns separation, not child margins.
   Keep hero bleed and nested component spacing independent of that separation. */
.portal-layout .portal-page > :is(.booking-details-page, .cancellation-details-page) {
    row-gap: var(--page-section-gap);
}
.portal-layout .portal-page > :is(.booking-details-page, .cancellation-details-page) > :not(.modal) {
    margin-block: 0;
}
.portal-layout .portal-page > .cancellation-details-page > .portal-page-hero {
    margin-top: calc(-1 * var(--page-panel-padding));
}
/* This is an embedded itinerary, not another page canvas. Never target the
   shared booking-reference-page class outside this operational detail page. */
.portal-layout .booking-details-page > .booking-details-itinerary {
    padding: 0;
}
.portal-layout .booking-details-page > .booking-details-itinerary > .booking-panel-heading {
    margin: 0 0 12px;
    padding: 0;
}
.portal-layout .booking-details-page > .booking-details-itinerary > .booking-itinerary-details {
    margin-block: 0;
}
/* Major component boundaries across lists, dashboards, security and settings.
   Do not descend into controls, table rows, modal bodies or purchase components.
   Connected tab headers/content intentionally keep their existing seam. */
.portal-layout :is(.portal-page, .portal-content,
    .portal-page > .content-card:not(.booking-details-page):not(.cancellation-details-page):not(.role-menu-page),
    .portal-content > .content-card, .platform-content, .platform-content > .tab-content > .tab-pane)
    > :is(section, .card, .table-responsive, .portal-action-bar, .alert,
    .booking-filter-panel, .cancellation-filter-panel,
    .booking-filter-shell, .cancellation-filter-shell, .commission-template-bar,
    .commission-flow-note, .authenticator-enabled-panel, .authenticator-setup-grid,
    .dashboard-grid, .setup-card-grid, .master-card-grid, .d-flex.mb-2, .d-flex.mb-3):not(.portal-page-hero):not(.namo-page-hero):not(.booking-overview-hero) {
    margin-top: 0 !important;
    margin-bottom: var(--page-section-gap) !important;
}
.portal-layout :is(.dashboard-grid, .setup-card-grid, .master-card-grid,
    .authenticator-setup-grid, .cancellation-details-grid) {
    gap: var(--page-section-gap);
}
/* Bootstrap row gutters remain intact; only space after whole forms is unified. */
.portal-layout :is(.portal-page > .content-card, .portal-content > .content-card,
    .platform-content, .platform-content > .tab-content > .tab-pane)
    > :is(form, .row):not(:last-child) {
    margin-bottom: var(--page-section-gap) !important;
}
.portal-layout :is(.portal-page, .portal-content, .portal-page > .content-card,
    .portal-content > .content-card, .platform-content, .platform-content > .tab-content > .tab-pane)
    > :is(section, .card, .table-responsive, .portal-action-bar, .alert,
    .dashboard-grid, .setup-card-grid, .master-card-grid):last-child {
    margin-bottom: 0 !important;
}
@media (max-width: 991.98px) {
    .portal-layout { --page-gutter: 16px; --page-block: 20px; --page-panel-padding: 20px; }
}
@media (max-width: 575.98px) {
    .portal-layout { --page-gutter: 12px; --page-block: 16px; --page-panel-padding: 16px; }
}