/* ========== Additional Styles ========== */

/* Developers can quickly add new styles that are uncompiled here. You can move these into the main css file later to be SASS compressed into the minified version. */

/* ========== Activity Log Filtering and Sorting Styles ========== */

/* Hide filtered rows */
#body .hidden-by-filter,
#body .hidden-by-filter-search {
    display: none !important;
}

/* Sortable functionality removed - using filters for organization */

/* Activity log table styling */
#body .activitylog_table_wrapper {
    overflow-x: auto;
    /*margin-top: 20px;*/
}

#body .activitylog_table_base {
    width: 100%;
    border-collapse: collapse;
}

/* Table headers removed - activity log starts immediately with data rows */

#body .activitylog_table_base td {
    padding: 8px;
    border-bottom: 1px solid var(--Neutral-Alto-300);
    vertical-align: top;
}

#body .activitylog_table_base tbody tr:hover {
    background-color: var(--Neutral-Geyser-400);
}

/* Hidden table columns for filtering */
#body .hiddenTableCols {
    display: none;
}


/* ========== Elements Edit Layout: 8px Grid Normalization ========== */
/* App root font-size is 13px, so rem units don't land on 8px boundaries.
   Use literal pixel values so spacing aligns to an 8px grid. */

/* Titlebar (breadcrumb + activity log row) */
#body .titlebar_elementsedit {
    min-height: 8px;
    max-height: 8px;
    gap: 0 8px;
}

#body #main .titlebar_elementsedit:has(.titlebar_activitylog_sorting) {
    min-height: 8px;
    max-height: 8px;
}

#body .titlebar_elementsedit > div {
    margin: 0;
    align-self: center;
}

#body #main .titlebar_breadcrumb_container {
    min-width: 0;
    margin: 0;
}

#body #main .titlebar_activitylog_sorting {
    gap: 0 8px;
    margin: 0;
}

#body .titlebar_activitylog_sorting > *:not(.spacer) {
    margin: 0;
}

/* Edit page wrapper: uniform 8px padding on all sides. */
#body main section.editpage .editpage_content {
    padding: 8px;
}

/* Titlebar fills wrapper width (no offsetting needed since parent padding is uniform). */
#body main section.editpage .editpage_content > .titlebar_elementsedit {
    margin: 0;
    width: 100%;
    min-width: 100%;
}

/* Panels: 8px gap between left detail rail and main panel, no extra padding,
   and recompute height to fit inside the wrapper:
       100vh - 4rem (header, ~52px @ 13px root) - 8px (top padding) - 8px (titlebar) - 8px (bottom padding)
   Using calc with rem for the header (matches the editpage_content min-height calc) and px for the rest. */
#body main section.editpage .editpage_content .editpage_content_menuandpanels {
    gap: 0 8px;
    padding: 0;
    min-width: 100%;
    max-width: 100%;
    min-height: calc(100vh - 4rem - 24px);
    max-height: calc(100vh - 4rem - 24px);
}

#body main section.editpage .editpage_content .editpage_content_menuandpanels > .panelcontent {
    padding: 0;
}

#body main section.editpage .editpage_content .editpage_content_menuandpanels > #codecontent {
    padding: 0;
}

/* ========== Shop Preview Panel ========== */
/* Visibility is driven by a single class on #panelcontent. When 'show-preview'
   is present, every sibling panel hides and the shop preview panel shows.
   !important on both is needed because the HTML has inline style="display:none;"
   on the shop panel (initial state) and siblings may carry their own inline
   styles toggled by other code paths. */
#panelcontent.show-preview > [data-panel-id]:not(#shoppreview_panel) {
    display: none !important;
}
#panelcontent.show-preview > #shoppreview_panel {
    display: block !important;
}

.shoppreview_panel {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
}

.shoppreview_iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    border-radius: 1rem;
}

/* Overlay matches LoadingIndicator's dark-translucent backdrop + white spinner
   so the preview's loading state is visually consistent with the rest of the
   Elements UI (api-service.js LoadingIndicator.show pattern). */
.shoppreview_overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 1rem;
    z-index: 2;
}

/* Hide overlay when iframe is ready. */
.shoppreview_panel.is-ready .shoppreview_overlay {
    display: none;
}

.shoppreview_overlay_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
}

/* CSS-animated spinner — pixel values + explicit !important to win the cascade
   even if other elements-* sheets have conflicting rules cached. */
.shoppreview_overlay_spinner {
    width: 48px !important;
    height: 48px !important;
    border: 5px solid var(--Neutral-Alto-300, rgba(255, 255, 255, 0.3)) !important;
    border-top-color: var(--Primary-Denim-300, #ffffff) !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    animation: shoppreview-spin 0.8s linear infinite !important;
    display: block !important;
}

@keyframes shoppreview-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.shoppreview_overlay_text {
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.shoppreview_overlay_status {
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    opacity: 0.85;
    min-height: 1em;
}

.shoppreview_overlay.is-error {
    background: rgba(120, 0, 0, 0.65);
}

/* ========== Hide Version Buttons Panel (Create/Restore/Save JSON) ========== */
/* !important is required: Elements.cshtml has many jQuery .show() and
   .css('display', ...) calls on #publish_version / #restore_version /
   #save_json that would otherwise reveal the panel. Hiding the wrapper
   keeps the buttons in the DOM (so visibility-check JS still runs) but
   guarantees nothing renders. */
#body [data-id="titlebar_publish"] {
    display: none !important;
}

/* ========== Preview Panel Animation Overlay ========== */
.previewpanel_input_item {
    position: relative;
}

/* Full-panel overlay: the LI is positioned absolutely to cover the entire
   previewmenu UL (which is the positioned ancestor inside .leftdetailsmenu),
   and is fully opaque so the inputs underneath are completely hidden. */
#previewmenu {
    position: relative;
}

/* When the preview is starting (or showing an error), hide all the option
   items underneath so only the overlay is visible. The overlay LI itself
   is exempt. */
#previewmenu.is-loading > li:not(#previewpanel_inputs_overlay) {
    visibility: hidden;
}

.previewpanel_inputs_overlay {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--Neutral-Concrete-200, #1f1f1f); /* fully opaque to hide inputs underneath */
    z-index: 50;
    border-radius: 4px;
    padding: 1rem;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
}

/* Make the inner state wrapper an explicit centered grid so the spinner and
   the status text share the same horizontal axis. NOTE: do NOT put `display`
   under !important here — the loading/error wrappers are toggled with
   `style="display:none"` and jQuery .show()/.hide(), and an !important display
   would override the hidden state and leave the "Preview failed to start"
   error block visible while the container is loading. */
#previewpanel_inputs_overlay #previewpanel_overlay_loading.previewpanel_overlay_state,
#previewpanel_inputs_overlay #previewpanel_overlay_error.previewpanel_overlay_state,
.previewpanel_inputs_overlay .previewpanel_overlay_state {
    display: grid;
    place-items: center !important;
    row-gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

/* Drop the margin-top on the status text — the grid row-gap above handles
   spacing, so the text doesn't get nudged off the spinner's column. */
#previewpanel_inputs_overlay .previewpanel_overlay_status_text {
    margin: 0 !important;
}

.previewpanel_inputs_overlay .shoppreview_overlay_inner {
    gap: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
}

.previewpanel_inputs_overlay .shoppreview_overlay_spinner {
    width: 32px !important;
    height: 32px !important;
    border-width: 3px !important;
    border-color: var(--Neutral-Alto-300, rgba(255, 255, 255, 0.3)) !important;
    border-top-color: var(--Primary-Denim-300, #ffffff) !important;
    margin: 0 auto;
}

.previewpanel_overlay_status_text {
    color: var(--Type-Limed-Spruce-300, #fff);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    margin-top: 8px;
    text-align: center;
    min-height: 1em;
    word-break: break-word;
}

.previewpanel_overlay_error_title {
    color: #ff8080;
    font-weight: 600;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.previewpanel_overlay_error_text {
    color: var(--Type-Limed-Spruce-300, #fff);
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin-top: 4px;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

.previewpanel_overlay_error_ok {
    margin-top: 12px;
    min-width: 80px;
}

/* Hide iframe until it is ready */
.shoppreview_panel:not(.is-ready) .shoppreview_iframe {
    visibility: hidden;
}

/* Indeterminate progress bar shown while the iframe is navigating to a new URL.
   Hidden by default; JS toggles .is-active when the proxied content posts a
   preview-nav-start message and removes it on preview-nav-end (or after a
   safety timeout). */
.shoppreview_navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
    z-index: 10;
    display: none;
    background: rgba(76, 139, 245, 0.15);
}
.shoppreview_navbar.is-active {
    display: block;
}
.shoppreview_navbar > span {
    display: block;
    position: absolute;
    top: 0;
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, transparent, var(--Primary-500, #4c8bf5), transparent);
    animation: shoppreview_navbar_slide 1s linear infinite;
    will-change: transform;
}
@keyframes shoppreview_navbar_slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* ========== Preview Running Info Card ==========
   Mirrors the look of the Publish panel's .environmentpanel card:
   same dark background, radius, padding, and the same green "Published"
   pill. Selectors use the publish panel's specificity prefix so they win
   against generic .schemapanel/.textmenu li rules. */

#body nav.menu_element_details > ul.textmenu > li.previewpanel_running_item {
    display: block;
    width: auto;
    min-width: 100%;
    background: var(--Neutral-Concrete-200, transparent);
    border-radius: 0.5rem;
    margin: 0 0 0.75rem 0;
    padding: 0.875rem 1rem;
}

#body nav.menu_element_details > ul.textmenu > li.previewpanel_running_item > .previewpanel_running_box {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

#body nav.menu_element_details > ul.textmenu > li.previewpanel_running_item .previewpanel_running_url {
    font-size: 0.75rem;
    word-break: break-all;
    color: var(--Type-Limed-Spruce-300, inherit);
    margin-bottom: 0.25rem;
}

#body nav.menu_element_details > ul.textmenu > li.previewpanel_running_item .previewpanel_running_row {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 1.25rem;
    max-height: none;
    background: transparent;
    padding: 0;
    margin: 0;
}

#body nav.menu_element_details > ul.textmenu > li.previewpanel_running_item .previewpanel_running_label {
    flex: 0 0 auto;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    color: var(--Type-Limed-Spruce-300, inherit);
    white-space: nowrap;
}

#body nav.menu_element_details > ul.textmenu > li.previewpanel_running_item .previewpanel_running_value {
    flex: 0 1 auto;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    color: var(--Type-Limed-Spruce-300, inherit);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

/* "Active Preview" subtitle — reuses .publishsubtitle layout from the
   publish panel; this just ensures it shows/hides cleanly. */
#body nav.menu_element_details > ul.textmenu > li.previewpanel_runningtitle {
    margin-bottom: 0.5rem;
}

/* Green "Published" pill — visually matches .publishedpill in the
   publish panel. We can't reuse that class because its CSS is scoped
   to li.environmentpanel. */
#body nav.menu_element_details > ul.textmenu > li.previewpanel_running_item .previewpanel_status_pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    background: var(--Tags-Background-Green, inherit);
    cursor: default;
    flex: 0 0 auto;
}

#body nav.menu_element_details > ul.textmenu > li.previewpanel_running_item .previewpanel_status_pill > span {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--Tags-Type-Green, inherit);
    white-space: nowrap;
}

/* ========== Panel View Button: extra left margin from language switcher ========== */
#body #titlebar_panelview {
    margin-left: 16px;
}