/*
 * UFS Facility Public Page Section Editor Shared Styles
 *
 * Consolidates the duplicated CSS isolation files previously stored beside
 * Profile/Section/*.razor components.
 *
 * Keep unified Section editors visually consistent by
 * maintaining their editor-level styles here instead of per-component .razor.css files.
 */

/* --------------------------------------------------------------------------
   Repeatable Section navigation colors
   Migrated from the legacy repeatable section editor CSS isolation files.
   -------------------------------------------------------------------------- */

/* #UFS-Repeatable-Engine-Contact-Location */
.subject-repeatable-editor .subject-editor-nav-item[style] {
    color: var(--badge-accent-dark, #334155);
    border-color: var(--badge-border, #dbe3ee);
    background: color-mix(in srgb, var(--badge-soft, #f8fafc) 82%, #fff);
}
.subject-repeatable-editor .subject-editor-nav-item[style]:hover,
.subject-repeatable-editor .subject-editor-nav-item[style].active {
    color: var(--badge-accent-dark, #334155);
    border-color: var(--badge-accent, #7c5ce7);
    background: var(--badge-soft, #f8fafc);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--badge-accent, #7c5ce7) 13%, transparent);
}

/* --------------------------------------------------------------------------
   Badge/Stats/Highlights navigation colors
   Migrated from the legacy badge/stats/highlights editor CSS isolation files.
   -------------------------------------------------------------------------- */
/* Keep Badge navigator colors identical to the corresponding Repeatable Engine item. */
.badge-repeatable-nav-item {
    border: 1px solid var(--badge-border, #cbd5e1) !important;
    background: color-mix(in srgb, var(--badge-soft, #f8fafc) 72%, #fff) !important;
    color: var(--badge-accent-dark, #334155) !important;
}

.badge-repeatable-nav-item > i {
    color: var(--badge-accent, #64748b) !important;
}

.badge-repeatable-nav-item:hover,
.badge-repeatable-nav-item:focus-visible {
    border-color: var(--badge-accent, #64748b) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--badge-accent, #64748b) 14%, transparent);
}

.badge-repeatable-nav-item.active {
    border-color: var(--badge-accent, #334155) !important;
    background: color-mix(in srgb, var(--badge-accent, #334155) 82%, #fff) !important;
    color: #fff !important;
}

.badge-repeatable-nav-item.active > i {
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   Root section editor layout and AI tool alignment
   Migrated from the legacy root section editor CSS isolation file.
   -------------------------------------------------------------------------- */
.facility-root-edit-page .root-section-editor-shell {
    max-width: 1480px;
    margin: 0 auto;
}

.root-section-editor-page-header {
    padding: 1.25rem;
    border: 1px solid rgba(148, 163, 184, .32);
    border-radius: 1.35rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .06);
}

.root-section-editor-workspace {
    align-items: start;
}

.root-section-editor-main-stack {
    min-width: 0;
}

.root-section-editor-section-card {
    border-radius: 1.25rem;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .06);
    overflow: hidden;
}

.root-section-editor-scroll-target {
    scroll-margin-top: 1rem;
}

.root-section-editor-panel,
.root-section-editor-field-card,
.root-section-editor-standard-panel {
    border: 1px solid rgba(148, 163, 184, .3);
    border-radius: 1rem;
    background: #fff;
    padding: 1rem;
}

.root-section-editor-panel-soft {
    background: #f8fafc;
}

.root-section-editor-panel-title,
.root-section-editor-standard-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #0f172a;
    font-weight: 900;
}

.root-section-editor-panel-note,
.root-section-editor-standard-note {
    margin-top: .25rem;
    color: #64748b;
    font-size: .86rem;
    line-height: 1.45;
}

.root-section-editor-standard-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.root-section-editor-field-card {
    height: 100%;
    background: #f8fafc;
}

.root-section-editor-icon-picker-field {
    display: grid;
    gap: .55rem;
}

.subject-editor-nav-item.tone-root { --subject-nav-accent: #0f172a; }
.subject-editor-nav-item.tone-fields { --subject-nav-accent: #2563eb; }
.subject-editor-nav-item.tone-images { --subject-nav-accent: #0891b2; }
.subject-editor-nav-item.tone-facts { --subject-nav-accent: #16a34a; }
.subject-editor-nav-item.tone-actions { --subject-nav-accent: #d97706; }

.root-section-editor-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    margin-bottom: .4rem;
    overflow: visible;
}

.root-section-editor-field-header .form-label {
    margin-bottom: 0;
    font-weight: 700;
    color: #111827;
}

.root-section-editor-field-tools {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    flex-shrink: 0;
    overflow: visible;
}

/* --------------------------------------------------------------------------
   Public Page Sections Dashboard
   Consolidated from UFS.Shared/Pages/Facility/PublicPage/FacilityPublicPageContent.razor
   -------------------------------------------------------------------------- */
.public-page-sections-dashboard {
    display: grid;
    gap: 1rem;
}

.public-page-sections-dashboard__toolbar,
.public-page-sections-dashboard__summary,
.public-page-sections-dashboard__section-list-panel {
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .06);
}

.public-page-sections-dashboard__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem;
}

.public-page-sections-dashboard__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 900;
    color: #0f172a;
}

.public-page-sections-dashboard__subtitle {
    margin: .2rem 0 0;
    max-width: 62rem;
    color: #64748b;
    font-size: .86rem;
    line-height: 1.45;
}

.public-page-sections-dashboard__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
}

.public-page-sections-dashboard__summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    padding: 1rem;
}

.public-page-sections-dashboard__summary-item {
    padding: .75rem;
    border-radius: .95rem;
    background: #f8fafc;
    text-align: center;
}

.public-page-sections-dashboard__summary-item strong {
    display: block;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 950;
}

.public-page-sections-dashboard__summary-item span {
    display: block;
    margin-top: .15rem;
    color: #64748b;
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.public-page-sections-dashboard__section-list-panel {
    overflow: visible;
}

.public-page-sections-dashboard__row-list {
    display: grid;
    overflow: visible;
}

.public-page-sections-dashboard__row {
    --row-accent: var(--section-accent, #64748b);
    position: relative;
    display: grid;
    grid-template-columns: 2rem 2.55rem 2rem minmax(0, 1fr) minmax(15rem, .52fr) minmax(10.75rem, .32fr) auto;
    align-items: center;
    gap: .65rem;
    min-height: 4.9rem;
    padding: .72rem .85rem;
    border-bottom: 1px solid #edf0f4;
    background: #fff;
    transition: background .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.public-page-sections-dashboard__row:last-child,
.public-page-sections-dashboard__row-list .public-page-sections-dashboard__row:last-child {
    border-bottom: 0;
}

.public-page-sections-dashboard__row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: .22rem;
    background: var(--row-accent);
    opacity: .9;
}

.public-page-sections-dashboard__row:hover {
    background: #fafbfc;
}

.public-page-sections-dashboard__row:hover,
.public-page-sections-dashboard__row:focus-within {
    z-index: 120;
}

.public-page-sections-dashboard__row.is-excluded {
    background: #fbfcfe;
    opacity: 1;
}

.public-page-sections-dashboard__row.is-root {
    background: #fff;
    opacity: 1;
}

.public-page-sections-dashboard__drag,
.public-page-sections-dashboard__row-text,
.public-page-sections-dashboard__open-button,
.public-page-sections-dashboard__menu-trigger,
.public-page-sections-dashboard__menu-popover button {
    border: 0;
    background: transparent;
}

.public-page-sections-dashboard__drag {
    width: 1.85rem;
    height: 2.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4e7ec;
    border-radius: .55rem;
    background: #f8fafc;
    color: #667085;
    cursor: grab;
    touch-action: none;
    user-select: none;
    transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.public-page-sections-dashboard__drag:hover:not(.is-disabled) {
    border-color: #cbd5e1;
    background: #fff;
    color: #344054;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .08);
}

.public-page-sections-dashboard__drag:active:not(.is-disabled) {
    cursor: grabbing;
    background: #eef2f6;
}

.public-page-sections-dashboard__drag.is-disabled {
    cursor: not-allowed;
    opacity: .58;
}

.public-page-sections-dashboard__row-icon {
    width: 2.55rem;
    height: 2.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .85rem;
    background: color-mix(in srgb, var(--row-accent) 12%, #fff);
    color: var(--row-accent);
    font-size: 1.06rem;
}

.public-page-sections-dashboard__row-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(148, 163, 184, .55);
    border-radius: .65rem;
    background: #fff;
}

.public-page-sections-dashboard__row-select input {
    width: 1rem;
    height: 1rem;
}

.public-page-sections-dashboard__row-select.is-root {
    opacity: .62;
    cursor: not-allowed;
}

.public-page-sections-dashboard__row-text {
    display: grid;
    gap: .18rem;
    width: 100%;
    min-width: 0;
    padding: 0;
    text-align: left;
}

.public-page-sections-dashboard__row-text:disabled {
    cursor: wait;
}

.public-page-sections-dashboard__row-title-line {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    flex-wrap: wrap;
}

.public-page-sections-dashboard__row-title-line strong {
    overflow: hidden;
    color: #101828;
    font-size: .88rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-page-sections-dashboard__row-text small {
    display: block;
    overflow: hidden;
    max-width: 100%;
    color: #667085;
    font-size: .74rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-page-sections-dashboard__row-key {
    overflow: hidden;
    max-width: 100%;
    color: #98a2b3;
    font-family: var(--bs-font-monospace, monospace);
    font-size: .63rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-page-sections-dashboard__chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .16rem .48rem;
    border-radius: 999px;
    background: #f2f4f7;
    color: #667085;
    font-size: .63rem;
    font-weight: 850;
    line-height: 1.2;
}

.public-page-sections-dashboard__chip.is-included {
    color: #067647;
    background: #ecfdf3;
}

.public-page-sections-dashboard__chip.is-fixed {
    color: #175cd3;
    background: #eff4ff;
}

.public-page-sections-dashboard__chip.is-repeatable {
    color: #7a2e0e;
    background: #fff7ed;
}

.public-page-sections-dashboard__row-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .35rem;
}

.public-page-sections-dashboard__row-stats span {
    display: grid;
    justify-items: center;
    gap: .08rem;
    min-width: 3.2rem;
    padding: .38rem .3rem;
    border-radius: .65rem;
    background: #f8fafc;
}

.public-page-sections-dashboard__row-stats strong {
    color: #0f172a;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1;
}

.public-page-sections-dashboard__row-stats small {
    color: #667085;
    font-size: .57rem;
    font-weight: 850;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
}

.public-page-sections-dashboard__layout-control {
    display: grid;
    gap: .26rem;
    min-width: 0;
    margin: 0;
}

.public-page-sections-dashboard__layout-control > span:first-child {
    color: #667085;
    font-size: .6rem;
    font-weight: 850;
    letter-spacing: .045em;
    line-height: 1;
    text-transform: uppercase;
}

.public-page-sections-dashboard__layout-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.public-page-sections-dashboard__layout-select-wrap .form-select {
    min-width: 0;
    height: 2.35rem;
    padding-top: .35rem;
    padding-bottom: .35rem;
    padding-left: .62rem;
    padding-right: 2.8rem;
    border-color: #d0d5dd;
    border-radius: .55rem;
    background-color: #fff;
    color: #344054;
    font-size: .7rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.public-page-sections-dashboard__layout-select-wrap .form-select:hover:not(:disabled),
.public-page-sections-dashboard__layout-select-wrap .form-select:focus {
    border-color: #84adff;
    box-shadow: 0 0 0 .16rem rgba(37, 99, 235, .12);
}

.public-page-sections-dashboard__layout-select-wrap .form-select:disabled {
    cursor: wait;
    opacity: .72;
}

.public-page-sections-dashboard__layout-select-wrap > i,
.public-page-sections-dashboard__layout-select-wrap > .spinner-border {
    position: absolute;
    right: 1.9rem;
    z-index: 2;
    color: var(--row-accent);
    pointer-events: none;
}

.public-page-sections-dashboard__layout-select-wrap > i {
    font-size: .76rem;
}

.public-page-sections-dashboard__layout-select-wrap > .spinner-border {
    width: .78rem;
    height: .78rem;
    border-width: .12rem;
}

.public-page-sections-dashboard__row-actions {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
}

.public-page-sections-dashboard__open-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 6.6rem;
    padding: .46rem .65rem;
    border: 1px solid #d0d5dd;
    border-radius: .55rem;
    color: #344054;
    font-size: .73rem;
    font-weight: 800;
    white-space: nowrap;
}

.public-page-sections-dashboard__open-button:hover:not(:disabled) {
    color: #175cd3;
    border-color: #84adff;
    background: #eff4ff;
}

.public-page-sections-dashboard__menu {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
}

.public-page-sections-dashboard__menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: .55rem;
    color: #667085;
    cursor: pointer;
}

.public-page-sections-dashboard__menu-trigger:hover,
.public-page-sections-dashboard__menu:focus-within .public-page-sections-dashboard__menu-trigger {
    color: #101828;
    background: #f2f4f7;
}

.public-page-sections-dashboard__menu-popover {
    position: absolute;
    z-index: 130;
    top: calc(100% - 1px);
    right: 0;
    width: 14.8rem;
    padding: .35rem;
    border: 1px solid #e4e7ec;
    border-radius: .7rem;
    background: #fff;
    box-shadow: 0 16px 36px rgba(16, 24, 40, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .12s ease, visibility .12s ease, transform .12s ease;
}

.public-page-sections-dashboard__menu:hover .public-page-sections-dashboard__menu-popover,
.public-page-sections-dashboard__menu:focus-within .public-page-sections-dashboard__menu-popover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.public-page-sections-dashboard__menu-popover button {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .58rem .65rem;
    border-radius: .48rem;
    color: #344054;
    font-size: .76rem;
    font-weight: 650;
    text-align: left;
}

.public-page-sections-dashboard__menu-popover button:hover:not(:disabled) {
    background: #f2f4f7;
}

.public-page-sections-dashboard__menu-popover button.is-danger {
    color: #b42318;
}

.public-page-sections-dashboard__menu-popover button.is-danger:hover:not(:disabled) {
    background: #fef3f2;
}

.public-page-sections-dashboard__menu-popover button:disabled {
    color: #98a2b3;
    cursor: not-allowed;
    opacity: 1;
    background: #fff;
}

.public-page-sections-dashboard__row.is-dragging {
    position: relative;
    z-index: 125;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
    opacity: .58;
}

.public-page-sections-dashboard__row.is-drop-target {
    z-index: 124;
}

.public-page-sections-dashboard__row.is-drop-before {
    box-shadow: inset 0 3px 0 #2563eb;
}

.public-page-sections-dashboard__row.is-drop-after {
    box-shadow: inset 0 -3px 0 #2563eb;
}

.public-page-sections-dashboard__row-list.is-sorting {
    cursor: grabbing;
}

.public-page-sections-dashboard__section-theme-root { --section-accent: #0f172a; }
.public-page-sections-dashboard__section-theme-hero { --section-accent: #7c3aed; }
.public-page-sections-dashboard__section-theme-welcome-message { --section-accent: #2563eb; }
.public-page-sections-dashboard__section-theme-about { --section-accent: #0891b2; }
.public-page-sections-dashboard__section-theme-mission { --section-accent: #059669; }
.public-page-sections-dashboard__section-theme-vision { --section-accent: #4f46e5; }
.public-page-sections-dashboard__section-theme-badge { --section-accent: #d97706; }
.public-page-sections-dashboard__section-theme-contact { --section-accent: #dc2626; }
.public-page-sections-dashboard__section-theme-location { --section-accent: #16a34a; }
.public-page-sections-dashboard__section-theme-media { --section-accent: #db2777; }
.public-page-sections-dashboard__section-theme-stat,
.public-page-sections-dashboard__section-theme-stats { --section-accent: #0284c7; }
.public-page-sections-dashboard__section-theme-highlight,
.public-page-sections-dashboard__section-theme-highlights { --section-accent: #ca8a04; }
.public-page-sections-dashboard__section-theme-testimonial,
.public-page-sections-dashboard__section-theme-testimonials { --section-accent: #9333ea; }
.public-page-sections-dashboard__section-theme-announcement,
.public-page-sections-dashboard__section-theme-announcements { --section-accent: #ea580c; }
.public-page-sections-dashboard__section-theme-social-link,
.public-page-sections-dashboard__section-theme-social-links { --section-accent: #0d9488; }
.public-page-sections-dashboard__section-theme-business-hour,
.public-page-sections-dashboard__section-theme-business-hours { --section-accent: #64748b; }
.public-page-sections-dashboard__section-theme-faq { --section-accent: #2563eb; }
.public-page-sections-dashboard__section-theme-trust { --section-accent: #15803d; }
.public-page-sections-dashboard__section-theme-branding { --section-accent: #be185d; }
.public-page-sections-dashboard__section-theme-services { --section-accent: #0369a1; }
.public-page-sections-dashboard__section-theme-policies { --section-accent: #475569; }
.public-page-sections-dashboard__section-theme-summary { --section-accent: #7c2d12; }

@media (max-width: 1120px) {
    .public-page-sections-dashboard__row {
        grid-template-columns: 2rem 2.4rem 2rem minmax(0, 1fr) minmax(10rem, .38fr) auto;
    }

    .public-page-sections-dashboard__row-stats {
        display: none;
    }
}

@media (max-width: 768px) {
    .public-page-sections-dashboard__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .public-page-sections-dashboard__row {
        grid-template-columns: 1.8rem 2.35rem 2rem minmax(0, 1fr) 2.2rem;
        gap: .5rem;
        padding: .7rem .65rem;
    }

    .public-page-sections-dashboard__layout-control {
        grid-column: 4 / 6;
        width: 100%;
        margin-top: .18rem;
    }

    .public-page-sections-dashboard__row-actions {
        grid-column: 4 / 6;
        justify-content: flex-start;
        margin-top: .12rem;
    }

    .public-page-sections-dashboard__menu {
        margin-left: auto;
    }

    .public-page-sections-dashboard__row-text small {
        white-space: normal;
    }
}

.public-page-content-editor__section-drag-placeholder {
    margin: 0;
    border: 2px dashed rgba(37, 99, 235, .42);
    border-radius: .85rem;
    background: rgba(37, 99, 235, .06);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .08);
}

.public-page-content-editor__section-drag-ghost {
    position: fixed !important;
    z-index: 2147483000 !important;
    pointer-events: none !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .18) !important;
    opacity: .96;
    cursor: grabbing;
}

.public-page-content-section-sort-active {
    cursor: grabbing;
    user-select: none;
}