/* UpdateCase 10 sites module (docs/features/MVP-major-refactor.md) */
.major-refactor-revision {
    border-bottom: 1px solid #e9ecef;
    padding: 6px 0;
}
.major-refactor-revision:last-child {
    border-bottom: 0;
}
.major-refactor-revision-current {
    background: #fff8e6;
}
.major-refactor-revision-text {
    max-height: 240px;
    overflow-y: auto;
    word-break: break-word;
}

/* Pages overview: filters dock to the bottom of the screen once scrolled past (major-refactor-261101.js) */
.major-refactor-filters-docked .major-refactor-filters {
    position: fixed;
    bottom: 0;
    z-index: 1030;
    margin-bottom: 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
}

/* Pages overview: element rows are three columns (button | name + badges | preview); image previews fit the column */
.major-refactor-element-preview img {
    max-width: 100%;
    max-height: 160px;
}
.major-refactor-element-preview p + p {
    color: #6c757d;
}

/* Pages overview: faded line between element rows so they don't blend together */
.major-refactor-element + .major-refactor-element {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 1rem;
}

/* Pages overview: Single and Grouped cards stick below the top bar, so the shorter one stays
   beside a long one while scrolling. Only the shorter card moves; side by side (lg+) only. */
@media (min-width: 992px) {
    .major-refactor-location-card {
        position: sticky;
        /* below the top bar (41px) and the pinned location bar */
        top: 100px;
    }
}

/* Pages overview: the current location's bar pins under the top bar while scrolling its elements,
   until the next location's bar takes over (sticky within .major-refactor-location), like the old app's .locationBarRow */
@media (min-width: 992px) {
    .major-refactor-location > .locationBar {
        position: sticky;
        top: 41px;
        z-index: 20;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    }
}

/* Sites menu: chosen variant badge under the top site; click to choose a different variant */
.major-refactor-menu-variant {
    /* lines up with the site name (the menu link is 55px plus its bullet) */
    padding: 0 25px 6px 66px;
}
.major-refactor-menu-variant .badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Pages overview: while a location bar is pinned, its page name shows on the right in large text */
.major-refactor-location-page {
    display: none;
    float: right;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: #26649f;
}
.major-refactor-location-pinned .major-refactor-location-page {
    display: inline;
}

/* Pages overview: docked filters get a Minimize tab; minimized, only the tab stays (phones start minimized) */
.major-refactor-filters-toggle {
    display: none;
}
.major-refactor-filters-docked .major-refactor-filters-toggle {
    display: inline-block;
    position: absolute;
    right: 20px;
    bottom: 100%;
    border-radius: 4px 4px 0 0;
}
.major-refactor-filters-toggle-show,
.major-refactor-filters-minimized .major-refactor-filters-toggle-hide {
    display: none;
}
.major-refactor-filters-minimized .major-refactor-filters-toggle-show {
    display: inline;
}
.major-refactor-filters-docked.major-refactor-filters-minimized .major-refactor-filters {
    background: transparent;
    border: 0;
    box-shadow: none;
}
.major-refactor-filters-docked.major-refactor-filters-minimized .major-refactor-filters .card-header,
.major-refactor-filters-docked.major-refactor-filters-minimized .major-refactor-filters .card-body {
    display: none;
}

/* Pages overview: tag badges on the page bar (the bar colours its links white, so set both colours) */
.pageBar a.major-refactor-page-tag {
    font-size: 12px;
    vertical-align: middle;
    color: #26649f;
    background: #fff;
}
.pageBar a.major-refactor-page-tag:hover {
    color: #26649f;
    background: #e9ecef;
}
.pageBar a.major-refactor-page-tag-active,
.pageBar a.major-refactor-page-tag-active:hover {
    color: #212529;
    background: #ffc107;
}

/* Side menu: Content / Developer mode toggle at the top (like the old app) */
.vertical-menu > li.major-refactor-mode-toggle {
    padding: 0 15px 10px;
    text-align: center;
}
.vertical-menu > li.major-refactor-mode-toggle > a {
    display: inline-block;
    padding: 4px 14px;
}

/* Pages overview: Developer Mode "Duplicate" dropdown on page and location bars */
.major-refactor-duplicate .btn {
    padding: 1px 8px;
    font-size: 12px;
    vertical-align: middle;
}
.major-refactor-duplicate .dropdown-menu {
    z-index: 1035;
}

/* Pages overview, Developer Mode: "<>" code buttons */
.major-refactor-code,
.major-refactor-code-copy {
    padding: 0 6px;
    font-size: 12px;
    line-height: 1.5;
    vertical-align: middle;
}
.major-refactor-element h5 + .major-refactor-code-group {
    margin-bottom: 4px;
}
/* Element rows: the legacy .elementsEach .btn (font-size 30px) would make the code button huge */
.elementsEach .btn.major-refactor-code,
.elementsEach .btn.major-refactor-code-copy {
    border-radius: 3px;
    padding: 0 6px;
    font-size: 12px;
}

/* Element edit screen: page name on the right of the header */
.major-refactor-edit-page {
    color: #26649f;
    line-height: 31px;
}

/* Pages overview (Drafts only / Both): draft previews glow orange so they are never mistaken for live content */
.major-refactor-preview + .major-refactor-preview {
    margin-top: 6px;
}
.major-refactor-preview.major-refactor-preview-draft {
    padding: 8px 10px;
    border-radius: 6px;
    background: #fff8ef;
    box-shadow: 0 0 0 2px #fd7e14, 0 0 10px 2px rgba(253, 126, 20, .45);
}

/* Pages overview previews: English shown; the second language replaces it while the row is hovered (old app).
   Both sit in the same grid cell, so the row keeps the taller one's height: swapping never resizes the row under the
   mouse (a shorter or longer second text used to move the row edge, lose the hover and flicker back). */
.major-refactor-element-preview {
    display: grid;
}
.major-refactor-element-preview > .major-refactor-preview {
    grid-area: 1 / 1;
    min-width: 0;
}
.major-refactor-element-preview > .major-refactor-preview + .major-refactor-preview {
    margin-top: 0;
}
.major-refactor-preview-second {
    visibility: hidden;
}
.major-refactor-element:hover .major-refactor-preview-first {
    visibility: hidden;
}
.major-refactor-element:hover .major-refactor-preview-second {
    visibility: visible;
}
.major-refactor-preview-language {
    float: right;
    margin-left: 6px;
}
/* Edit page, image elements: the image on top of each language column, a thumbnail per revision, admin debug */
.major-refactor-image img{display:block;max-width:100%;height:auto;border:1px solid #e3e6ef;border-radius:4px;background:#f8f9fa}
.major-refactor-image-preview{margin-bottom:10px}
.major-refactor-image-preview img{max-height:320px}
.major-refactor-image-thumb{margin:4px 0}
.major-refactor-image-thumb img{max-height:90px}
.major-refactor-image-missing-note{display:none;font-size:12px;color:#dc3545}
.major-refactor-image-missing img{display:none}
.major-refactor-image-missing .major-refactor-image-missing-note{display:inline-block;padding:4px 8px;border:1px dashed #dc3545;border-radius:4px}
.major-refactor-image-debug{font-size:12px;margin:4px 0}
.major-refactor-image-debug summary{cursor:pointer;color:#6c757d}
.major-refactor-image-debug table{table-layout:fixed;word-break:break-all}
.major-refactor-image-debug th{width:150px;font-weight:600;word-break:normal}