/*
   Reservation DetailViews keep their native XAF/DevExpress editors and
   actions. Application Model CSS hooks provide a stable, view-scoped skin.
*/
.coreops-detail-view {
    /* These tokens inherit the active DevExpress theme itself. This works
       whether XAF changes a data attribute or swaps the theme stylesheet. */
    --reservation-page: var(--dxds-color-surface-neutral-default-rest, var(--dxbl-fl-group-bg, var(--dxbl-group-bg, var(--bs-body-bg, #f8fbfd))));
    --reservation-surface: var(--dxds-color-surface-neutral-default-rest, var(--dxbl-fl-group-bg, var(--dxbl-group-bg, var(--bs-body-bg, #ffffff))));
    --reservation-surface-soft: color-mix(in srgb, var(--reservation-surface) 96%, var(--reservation-text) 4%);
    --reservation-border: color-mix(in srgb, var(--reservation-surface) 82%, var(--reservation-text) 18%);
    --reservation-border-soft: color-mix(in srgb, var(--reservation-surface) 90%, var(--reservation-text) 10%);
    --reservation-text: var(--dxds-color-content-neutral-default-rest, var(--dxbl-fl-group-color, var(--dxbl-group-color, var(--bs-body-color, #26384a))));
    --reservation-muted: var(--dxds-color-content-neutral-subdued-rest, color-mix(in srgb, var(--reservation-text) 72%, #587890 28%));
    --reservation-accent: color-mix(in srgb, #587890 70%, var(--reservation-text) 30%);
    --reservation-accent-hover: color-mix(in srgb, #496a82 58%, var(--reservation-text) 42%);
    --reservation-accent-soft: color-mix(in srgb, var(--reservation-surface) 88%, var(--reservation-accent) 12%);
    --reservation-focus: color-mix(in srgb, var(--reservation-accent) 22%, transparent);
    --reservation-focus-border: var(--reservation-accent);
    --reservation-focus-outline: color-mix(in srgb, var(--reservation-accent) 46%, transparent);
    --reservation-shadow: color-mix(in srgb, #000000 18%, transparent);
    --reservation-section-header: color-mix(in srgb, var(--reservation-surface) 90%, var(--reservation-accent) 10%);
    --reservation-section-header-alt: color-mix(in srgb, var(--reservation-surface) 88%, var(--reservation-accent) 12%);
    --reservation-section-title: var(--reservation-text);
    --reservation-icon: var(--reservation-accent);
    --reservation-field-label: var(--reservation-text);
    --reservation-note-surface: color-mix(in srgb, var(--reservation-surface) 96%, var(--reservation-accent) 4%);
    --reservation-tab-indicator: var(--reservation-accent);
    --reservation-tab-active: var(--reservation-text);
    --reservation-grid-header: color-mix(in srgb, var(--reservation-surface) 90%, var(--reservation-accent) 10%);
    --reservation-grid-header-text: var(--reservation-text);
    --reservation-row-hover: color-mix(in srgb, var(--reservation-surface) 92%, var(--reservation-accent) 8%);
    --reservation-button-border: var(--reservation-border);
    --reservation-button-text: var(--reservation-accent);
    --reservation-button-hover-border: var(--reservation-accent);
    --reservation-button-hover: color-mix(in srgb, var(--reservation-surface) 88%, var(--reservation-accent) 12%);
    --reservation-button-hover-text: var(--reservation-text);
    --reservation-link-decoration: color-mix(in srgb, var(--reservation-accent) 52%, transparent);
    --reservation-radius: 0.65rem;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: calc(100vh - 8rem);
    margin: 0;
    padding: clamp(0.75rem, 1.35vw, 1.15rem);
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--reservation-text);
}

.coreops-detail-view,
.coreops-detail-view * {
    box-sizing: border-box;
}

/* Reservation and Payment are full-width, quietly separated cards. */
.coreops-detail-view .coreops-detail-overview,
.coreops-detail-view .coreops-payment-metrics {
    display: flex;
    flex-direction: column !important;
    width: 100%;
    min-width: 0;
}

.coreops-detail-view .coreops-detail-overview {
    gap: 1.35rem;
}

.coreops-detail-view .coreops-detail-section,
.coreops-detail-view .coreops-financial-summary,
.coreops-detail-view .coreops-notes {
    --coreops-card-surface: var(--dxbl-fl-group-bg, var(--dxbl-group-bg, var(--reservation-surface)));
    --coreops-card-text: var(--dxbl-fl-group-color, var(--dxbl-group-color, var(--reservation-text)));
    --coreops-card-border: color-mix(in srgb, var(--coreops-card-surface) 78%, var(--coreops-card-text) 22%);
    width: 100%;
    min-width: 0;
    padding: 0.9rem 1.4rem 1rem !important;
    border: 1px solid var(--coreops-card-border) !important;
    border-radius: var(--reservation-radius) !important;
    background: var(--coreops-card-surface) !important;
    color: var(--coreops-card-text) !important;
    box-shadow: 0 0.15rem 0.5rem var(--reservation-shadow) !important;
}

.coreops-detail-view .coreops-detail-section.dxbl-group,
.coreops-detail-view .coreops-financial-summary.dxbl-group,
.coreops-detail-view .coreops-notes.dxbl-group {
    border: 1px solid var(--coreops-card-border) !important;
    border-radius: var(--reservation-radius) !important;
    background: var(--coreops-card-surface) !important;
    color: var(--coreops-card-text) !important;
}

.coreops-detail-view .coreops-detail-section > .dxbl-group,
.coreops-detail-view .coreops-financial-summary > .dxbl-group,
.coreops-detail-view .coreops-notes > .dxbl-group {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.coreops-detail-view .coreops-detail-section > .dxbl-group-header,
.coreops-detail-view .coreops-detail-section > .dxbl-group > .dxbl-group-header,
.coreops-detail-view .coreops-financial-summary > .dxbl-group-header,
.coreops-detail-view .coreops-financial-summary > .dxbl-group > .dxbl-group-header,
.coreops-detail-view .coreops-notes > .dxbl-group-header,
.coreops-detail-view .coreops-notes > .dxbl-group > .dxbl-group-header {
    min-height: auto;
    margin: 0 0 0.8rem;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--coreops-card-text, var(--reservation-text)) !important;
    font-size: 1.08rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.35;
}

/* Small monochrome section icons mirror the supplied reference without
   introducing custom components or replacing XAF group headers. */
.coreops-detail-view .coreops-detail-section > .dxbl-group-header::before,
.coreops-detail-view .coreops-detail-section > .dxbl-group > .dxbl-group-header::before,
.coreops-detail-view .coreops-financial-summary > .dxbl-group-header::before,
.coreops-detail-view .coreops-financial-summary > .dxbl-group > .dxbl-group-header::before,
.coreops-detail-view .coreops-notes > .dxbl-group-header::before,
.coreops-detail-view .coreops-notes > .dxbl-group > .dxbl-group-header::before {
    content: "";
    display: inline-block;
    width: 1.05rem;
    height: 1.05rem;
    margin-right: 0.55rem;
    background-color: var(--reservation-icon);
    vertical-align: -0.14rem;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.coreops-detail-view .coreops-detail-section > .dxbl-group-header::before,
.coreops-detail-view .coreops-detail-section > .dxbl-group > .dxbl-group-header::before {
    mask-image: 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 x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18M8 14h3M8 17h5'/%3E%3C/svg%3E");
}

.coreops-detail-view .coreops-financial-summary > .dxbl-group-header::before,
.coreops-detail-view .coreops-financial-summary > .dxbl-group > .dxbl-group-header::before {
    mask-image: 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 x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 9h18M7 15h4'/%3E%3C/svg%3E");
}

.coreops-detail-view .coreops-notes > .dxbl-group-header::before,
.coreops-detail-view .coreops-notes > .dxbl-group > .dxbl-group-header::before {
    mask-image: 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='M6 3h9l4 4v14H6zM14 3v5h5M9 12h6M9 16h6'/%3E%3C/svg%3E");
}

/* Notes receives only a nearly imperceptible blue header cue. */
.coreops-detail-view .coreops-notes {
    margin-top: 1.1rem;
}

.coreops-detail-view .coreops-notes > .dxbl-group-header,
.coreops-detail-view .coreops-notes > .dxbl-group > .dxbl-group-header {
    margin: -0.25rem -0.35rem 0.55rem;
    padding: 0.35rem 0.55rem !important;
    border-radius: 0.45rem;
    background: transparent !important;
}

.coreops-detail-view .coreops-captionless .label,
.coreops-detail-view .coreops-captionless label {
    display: none;
}

.coreops-detail-view .dxbl-form-layout-item {
    min-width: 0;
    padding-block: 0.34rem;
}

.coreops-detail-view .dxbl-form-layout-item .label,
.coreops-detail-view .dxbl-form-layout-item label,
.coreops-detail-view .dxbl-form-layout-item > .dxbl-fl-cpt,
.coreops-detail-view .dxbl-form-layout-item > .dxbl-fl-cpt .property-help-caption {
    color: var(--dxds-color-content-neutral-default-rest, var(--reservation-text)) !important;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1.3;
}

/* Native editors: restrained border, white surface and soft focus. */
.coreops-detail-view .dxbl-form-layout-item:not(.coreops-status) .dxbl-text-edit,
.coreops-detail-view .dxbl-form-layout-item:not(.coreops-status) .dxbl-combobox {
    min-width: 0;
    min-height: 2.1rem;
    border-color: var(--reservation-border);
    border-radius: 0.25rem;
    color: var(--reservation-text);
}

.coreops-detail-view .dxbl-form-layout-item:not(.coreops-status) .dxbl-text-edit:focus-within,
.coreops-detail-view .dxbl-form-layout-item:not(.coreops-status) .dxbl-combobox:focus-within {
    border-color: var(--reservation-focus-border);
    box-shadow: 0 0 0 0.125rem var(--reservation-focus);
}

.coreops-detail-view input,
.coreops-detail-view textarea,
.coreops-detail-view select {
    color: var(--dxbl-text-edit-color, var(--dxbl-fl-group-color, var(--reservation-text))) !important;
}

.coreops-detail-view .dxbl-text-edit,
.coreops-detail-view .dxbl-combobox,
.coreops-detail-view .dxbl-text-edit input,
.coreops-detail-view .dxbl-text-edit textarea,
.coreops-detail-view .dxbl-combobox input {
    color: var(--dxbl-text-edit-color, var(--dxbl-fl-group-color, var(--reservation-text))) !important;
}

.coreops-detail-view input:focus-visible,
.coreops-detail-view textarea:focus-visible,
.coreops-detail-view select:focus-visible,
.coreops-detail-view button:focus-visible {
    outline: 2px solid var(--reservation-focus-outline);
    outline-offset: 1px;
}

/* Appearance supplies each status color; CSS preserves the native editor. */
.coreops-detail-view .coreops-status .dxbl-text-edit,
.coreops-detail-view .coreops-status .dxbl-combobox {
    min-height: 2.1rem;
    border: 1px solid var(--reservation-border);
    border-radius: 0.25rem;
    box-shadow: none;
    font-weight: inherit;
}

.coreops-detail-view .coreops-status .dxbl-text-edit:focus-within,
.coreops-detail-view .coreops-status .dxbl-combobox:focus-within {
    border-color: var(--reservation-focus-border);
    box-shadow: 0 0 0 0.125rem var(--reservation-focus);
}

/* Every primary financial value has exactly the same visual weight. */
.coreops-detail-view .coreops-metric-total,
.coreops-detail-view .coreops-metric-secondary,
.coreops-detail-view .coreops-metric-balance {
    margin: 0 0 0.65rem !important;
}

.coreops-detail-view .coreops-metric-total .dxbl-text-edit,
.coreops-detail-view .coreops-metric-total input,
.coreops-detail-view .coreops-metric-secondary .dxbl-text-edit,
.coreops-detail-view .coreops-metric-secondary input,
.coreops-detail-view .coreops-metric-balance .dxbl-text-edit,
.coreops-detail-view .coreops-metric-balance input {
    min-height: 2.1rem;
    padding-inline: 0.65rem;
    border-color: var(--reservation-border);
    color: var(--reservation-text);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.coreops-detail-view .coreops-readonly-value .dxbl-text-edit,
.coreops-detail-view .coreops-readonly-value .dxbl-combobox,
.coreops-detail-view .coreops-readonly-value input,
.coreops-detail-view .coreops-readonly-value textarea {
    border-color: var(--reservation-border-soft);
    background: var(--dxbl-text-edit-bg, var(--reservation-surface-soft));
    color: var(--dxbl-text-edit-color, var(--reservation-text));
    box-shadow: none;
}

.coreops-detail-view .coreops-payment-link a {
    overflow-wrap: anywhere;
    color: var(--reservation-accent-hover) !important;
    font-weight: 600;
    text-decoration-color: var(--reservation-link-decoration);
    text-underline-offset: 0.18em;
}

.coreops-detail-view .coreops-notes textarea {
    min-height: 4rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--reservation-border);
    border-radius: 0.5rem;
    box-shadow: none;
    line-height: 1.5;
    resize: vertical;
}

.coreops-detail-view .coreops-notes textarea:focus {
    border-color: var(--reservation-focus-border);
    box-shadow: 0 0 0 0.125rem var(--reservation-focus);
}

.coreops-detail-view.atv-rental-detail .atv-rental-price-breakdown textarea,
.coreops-detail-view.atv-rental-detail .atv-rental-vehicle-summary textarea {
    min-height: 2.75rem;
    max-height: 6rem;
    resize: vertical;
}

/* Activity Session keeps the XAF form while matching the calm, sectioned
   layout used by the reservation screens. */
.activity-session-detail .activity-session-section {
    margin-bottom: 1.1rem;
    overflow: hidden;
}

.activity-session-detail .activity-session-section > .dxbl-group-header,
.activity-session-detail .activity-session-section > .dxbl-group > .dxbl-group-header {
    min-height: 2.8rem;
    margin: -0.9rem -1.4rem 0.7rem !important;
    padding: 0.7rem 1.4rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--reservation-border-soft) !important;
    border-radius: var(--reservation-radius) var(--reservation-radius) 0 0;
    background: var(--reservation-section-header-alt) !important;
    color: var(--reservation-section-title) !important;
}

.activity-session-detail .activity-session-columns {
    width: 100%;
    min-width: 0;
    gap: clamp(0.9rem, 2vw, 1.5rem);
}

.activity-session-detail .activity-session-column {
    min-width: 0;
}

.activity-session-detail .activity-session-field {
    width: 100%;
    min-width: 0;
    margin-bottom: 0.38rem;
}

.activity-session-detail .activity-session-field .label,
.activity-session-detail .activity-session-field label {
    color: var(--reservation-field-label) !important;
    white-space: normal;
}

.activity-session-detail .activity-session-section-capacity > .dxbl-group-header::before,
.activity-session-detail .activity-session-section-capacity > .dxbl-group > .dxbl-group-header::before {
    mask-image: 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='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.activity-session-detail .activity-session-section-additional > .dxbl-group-header::before,
.activity-session-detail .activity-session-section-additional > .dxbl-group > .dxbl-group-header::before {
    mask-image: 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='M6 3h9l4 4v14H6zM14 3v5h5M9 12h6M9 16h6'/%3E%3C/svg%3E");
}

.activity-session-detail .activity-session-long-text textarea {
    min-height: 4.25rem;
    padding: 0.65rem 0.75rem;
    border-color: var(--reservation-border);
    border-radius: 0.4rem;
    line-height: 1.45;
    resize: vertical;
}

.activity-session-detail .activity-session-tabs {
    margin-top: 0;
}

/* Activity Template and ATV Vehicle use the same quiet, reference-led card
   system while retaining the native XAF layout groups and property editors. */
.structured-detail-view .structured-detail-section {
    --coreops-card-surface: var(--dxbl-fl-group-bg, var(--dxbl-group-bg, var(--reservation-surface)));
    --coreops-card-text: var(--dxbl-fl-group-color, var(--dxbl-group-color, var(--reservation-text)));
    --coreops-card-border: color-mix(in srgb, var(--coreops-card-surface) 78%, var(--coreops-card-text) 22%);
    --coreops-card-header: color-mix(in srgb, var(--coreops-card-surface) 88%, var(--reservation-accent) 12%);
    width: 100%;
    min-width: 0;
    margin-bottom: 1rem;
    padding: 0.9rem 1.35rem 1rem !important;
    overflow: hidden;
    border: 1px solid var(--coreops-card-border) !important;
    border-radius: var(--reservation-radius) !important;
    background: var(--coreops-card-surface) !important;
    color: var(--coreops-card-text) !important;
    box-shadow: 0 0.15rem 0.5rem var(--reservation-shadow) !important;
}

.structured-detail-view .structured-detail-section.dxbl-group {
    border: 1px solid var(--coreops-card-border) !important;
    border-radius: var(--reservation-radius) !important;
    background: var(--coreops-card-surface) !important;
    color: var(--coreops-card-text) !important;
}

.structured-detail-view .structured-detail-section > .dxbl-group {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.structured-detail-view .structured-detail-section > .dxbl-group-header,
.structured-detail-view .structured-detail-section > .dxbl-group > .dxbl-group-header {
    display: flex;
    align-items: center;
    min-height: 2.7rem;
    margin: -0.9rem -1.35rem 0.72rem !important;
    padding: 0.68rem 1.35rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--coreops-card-border) !important;
    border-radius: var(--reservation-radius) var(--reservation-radius) 0 0;
    background: var(--coreops-card-header) !important;
    color: var(--coreops-card-text) !important;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.35;
}

.structured-detail-view .structured-detail-columns {
    width: 100%;
    min-width: 0;
    gap: clamp(0.85rem, 2vw, 1.45rem);
}

.structured-detail-view .structured-detail-column,
.structured-detail-view .structured-detail-field {
    min-width: 0;
}

.structured-detail-view .structured-detail-field {
    width: 100%;
    margin-bottom: 0.28rem;
}

.structured-detail-view .structured-detail-field .label,
.structured-detail-view .structured-detail-field label,
.structured-detail-view .structured-detail-field > .dxbl-fl-cpt,
.structured-detail-view .structured-detail-field > .dxbl-fl-cpt .property-help-caption {
    min-width: clamp(8.5rem, 11vw, 11.75rem);
    color: var(--dxds-color-content-neutral-default-rest, var(--reservation-text)) !important;
    white-space: normal;
}

.structured-detail-view .structured-detail-section > .dxbl-group > .dxbl-group-header,
.structured-detail-view .structured-detail-section > .dxbl-group > .dxbl-group-header .dxbl-text {
    color: var(--dxds-color-content-neutral-default-rest, var(--coreops-card-text)) !important;
}

.structured-detail-view .structured-detail-long-text textarea {
    min-height: 4.15rem;
    padding: 0.65rem 0.75rem;
    border-color: var(--reservation-border);
    border-radius: 0.4rem;
    line-height: 1.45;
    resize: vertical;
}

.structured-detail-view .structured-detail-tabs {
    margin-top: 0;
}

/* Section symbols belong to Activity Template only; ATV Vehicle follows its
   reference with clean text headers. */
.activity-template-detail .activity-template-section > .dxbl-group-header::before,
.activity-template-detail .activity-template-section > .dxbl-group > .dxbl-group-header::before {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin-right: 0.55rem;
    background-color: var(--reservation-icon);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.activity-template-detail .activity-template-section-general > .dxbl-group-header::before,
.activity-template-detail .activity-template-section-general > .dxbl-group > .dxbl-group-header::before {
    mask-image: 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 x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 7h8M8 11h5M8 15h7M8 18h4'/%3E%3C/svg%3E");
}

.activity-template-detail .activity-template-section-configuration > .dxbl-group-header::before,
.activity-template-detail .activity-template-section-configuration > .dxbl-group > .dxbl-group-header::before {
    mask-image: 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%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21H9.6v-.09A1.7 1.7 0 0 0 8.5 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H3V9.6h.09A1.7 1.7 0 0 0 4.6 8.5a1.7 1.7 0 0 0-.34-1.88l-.06-.06 2.83-2.83.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V3h4v.09A1.7 1.7 0 0 0 15.5 4.6a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.83 2.83-.06.06A1.7 1.7 0 0 0 19.4 9c.12.37.34.71.64.96.3.25.68.39 1.07.4H21v4h-.09a1.7 1.7 0 0 0-1.51.64z'/%3E%3C/svg%3E");
}

.activity-template-detail .activity-template-section-eligibility > .dxbl-group-header::before,
.activity-template-detail .activity-template-section-eligibility > .dxbl-group > .dxbl-group-header::before {
    mask-image: 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='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.activity-template-detail .activity-template-section-capacity > .dxbl-group-header::before,
.activity-template-detail .activity-template-section-capacity > .dxbl-group > .dxbl-group-header::before {
    mask-image: 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%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6'/%3E%3C/svg%3E");
}

.activity-template-detail .activity-template-section-schedule > .dxbl-group-header::before,
.activity-template-detail .activity-template-section-schedule > .dxbl-group > .dxbl-group-header::before {
    mask-image: 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 x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18M8 14h3M8 17h5'/%3E%3C/svg%3E");
}

.activity-template-detail .activity-template-section-advanced > .dxbl-group-header::before,
.activity-template-detail .activity-template-section-advanced > .dxbl-group > .dxbl-group-header::before {
    mask-image: 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='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E");
}

/* Student follows the supplied profile reference: one identity card, an
   integrated notes row, then the native related-data tabs. */
.student-detail .student-section {
    margin-bottom: 1rem;
}

.student-detail .student-section > .dxbl-group-header::before,
.student-detail .student-section > .dxbl-group > .dxbl-group-header::before {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 1.08rem;
    height: 1.08rem;
    margin-right: 0.55rem;
    background-color: var(--reservation-icon);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M4 21v-2a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v2h-5v-4h-6v4z'/%3E%3C/svg%3E");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.student-detail .student-notes-row {
    --coreops-notes-surface: color-mix(in srgb, var(--dxbl-fl-group-bg, var(--coreops-card-surface, var(--reservation-surface))) 94%, var(--reservation-accent) 6%);
    width: 100%;
    min-width: 0;
    margin-top: 0.35rem;
    padding: 0.55rem 0.75rem 0.65rem !important;
    border: 1px solid var(--reservation-border-soft) !important;
    border-radius: 0.55rem !important;
    background: var(--coreops-notes-surface) !important;
}

.student-detail .student-notes-row.dxbl-group {
    border: 1px solid var(--reservation-border-soft) !important;
    background: var(--coreops-notes-surface) !important;
}

.student-detail .student-notes-row > .dxbl-group {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.student-detail .student-notes-field {
    margin-bottom: 0;
}

.student-detail .student-notes-field textarea {
    min-height: 4.5rem;
}

.student-detail .student-tabs {
    margin-top: 0;
}

.student-detail .student-document-fields {
    margin-bottom: 0.65rem;
    padding: 0.25rem 0.35rem;
}

/* Native tabs use typography and an underline instead of filled blocks. */
.coreops-detail-view .coreops-related-tabs {
    --coreops-tabs-surface: var(--dxbl-fl-tab-group-bg, var(--dxbl-tabs-bg, var(--reservation-surface)));
    --coreops-tabs-text: var(--dxbl-fl-tab-group-color, var(--dxbl-tabs-color, var(--reservation-text)));
    width: 100%;
    min-width: 0;
    margin-top: 1.1rem;
    padding: 0.65rem 0.9rem 0.85rem;
    border: 1px solid var(--reservation-border);
    border-radius: var(--reservation-radius);
    background: var(--coreops-tabs-surface);
    box-shadow: 0 0.15rem 0.5rem var(--reservation-shadow);
    color: var(--coreops-tabs-text);
}

.coreops-detail-view .coreops-related-tabs .dxbl-tabs {
    border: 0;
    background: transparent;
}

.coreops-detail-view .coreops-related-tabs .dxbl-tabs-item {
    min-height: 2.6rem;
    margin-right: 0.25rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--reservation-muted);
    font-weight: 600;
}

.coreops-detail-view .coreops-related-tabs .dxbl-tabs-item:hover {
    background: var(--reservation-accent-soft);
    color: var(--reservation-accent-hover);
}

.coreops-detail-view .coreops-related-tabs .dxbl-tabs-item.dxbl-active {
    border-bottom-color: var(--reservation-tab-indicator) !important;
    background: transparent;
    color: var(--reservation-tab-active) !important;
}

.coreops-detail-view .coreops-related-tab {
    min-width: 0;
    padding-top: 0.55rem;
    border: 0;
    background: transparent;
}

.coreops-detail-view .coreops-related-tab.dxbl-group,
.coreops-detail-view .coreops-related-tab > .dxbl-group {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Nested XAF grids are visually integrated without replacing any controls. */
.coreops-detail-view .coreops-related-tabs .dxbl-grid {
    overflow: hidden;
    border: 1px solid var(--reservation-border);
    border-radius: 0.6rem;
    background: var(--dxbl-grid-bg, var(--coreops-tabs-surface));
    color: var(--dxbl-grid-color, var(--coreops-tabs-text));
}

.coreops-detail-view .coreops-related-tabs .dxbl-grid thead,
.coreops-detail-view .coreops-related-tabs .dxbl-grid .dxbl-grid-header-row,
.coreops-detail-view .coreops-related-tabs .dxbl-grid th {
    background: var(--reservation-grid-header);
    color: var(--reservation-grid-header-text);
}

.coreops-detail-view .coreops-related-tabs .dxbl-grid th,
.coreops-detail-view .coreops-related-tabs .dxbl-grid td {
    border-color: var(--reservation-border-soft);
}

.coreops-detail-view .coreops-related-tabs .dxbl-grid tbody tr:hover {
    background: var(--reservation-row-hover);
}

/* XAF actions, lookup buttons, filters and pagination stay native. */
.coreops-detail-view .dxbl-btn,
.coreops-detail-view .coreops-related-tabs .btn,
.coreops-detail-view .coreops-related-tabs button {
    box-shadow: none;
}

.coreops-detail-view .coreops-related-tabs .dxbl-pager,
.coreops-detail-view .coreops-related-tabs [class*="pager"] {
    border-color: var(--reservation-border-soft);
    background: var(--dxbl-pager-bg, var(--coreops-tabs-surface));
    color: var(--dxbl-pager-color, var(--coreops-tabs-text));
}

@media (max-width: 700px) {
    .coreops-detail-view {
        padding: 0.65rem;
    }

    .coreops-detail-view .coreops-detail-section,
    .coreops-detail-view .coreops-financial-summary,
    .coreops-detail-view .coreops-notes {
        padding: 0.85rem !important;
    }

    .coreops-detail-view .coreops-related-tabs .dxbl-tabs-item {
        margin-right: 0;
        padding-inline: 0.65rem;
    }

    .activity-session-detail .activity-session-columns {
        flex-direction: column !important;
        gap: 0;
    }

    .activity-session-detail .activity-session-section > .dxbl-group-header,
    .activity-session-detail .activity-session-section > .dxbl-group > .dxbl-group-header {
        margin: -0.85rem -0.85rem 0.65rem !important;
        padding: 0.65rem 0.85rem !important;
    }

    .structured-detail-view .structured-detail-section {
        padding: 0.85rem !important;
    }

    .structured-detail-view .structured-detail-columns {
        flex-direction: column !important;
        gap: 0;
    }

    .structured-detail-view .structured-detail-section > .dxbl-group-header,
    .structured-detail-view .structured-detail-section > .dxbl-group > .dxbl-group-header {
        margin: -0.85rem -0.85rem 0.65rem !important;
        padding: 0.65rem 0.85rem !important;
    }

    .structured-detail-view .structured-detail-field .label,
    .structured-detail-view .structured-detail-field label {
        min-width: 0;
    }
}