/* Help Topics viewer — search bar on top, then three columns: topic list | table of contents | content.
   Mirrors the General Settings modal styling (teal #008080 active states, grey dividers). */

/* Fill the viewport. The base ModalWindow overlay now flex-centres the container inside a 20px
   padded box, so we just fill that box (100% → the padded overlay, which also tracks 100dvh on
   mobile). No top/left/transform overrides needed anymore — those were for the old absolute-
   positioned + translate() centring and would now double-count the padding and shift the modal. */
.modal-window-container.help-topic-modal-container {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    display: flex;
    flex-direction: column;
}

/* Let the content area grow to fill the space below the teal header. */
.modal-window-container.help-topic-modal-container > .modal-window-content {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    padding: 0;
}

.help-topic-modal {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Super-admin "Copy link" button, appended to the teal header's title row. The title has flex:1,
   so this sits hard right; margin-right clears the absolutely-positioned close button (30px wide
   at right:12px, against the header's 20px padding). */
.help-topic-modal__copy-link {
    flex: 0 0 auto;
    margin-right: 30px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* Same 30px box as the close button so the two line up exactly (see the top override below). */
    height: 30px;
    line-height: 1;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.help-topic-modal__copy-link:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

.help-topic-modal__copy-link:active {
    background: rgba(255, 255, 255, 0.18);
}

/* The close button is absolutely positioned at top:12px, which leaves it ~6px above the centre of
   the header's title row (row starts at the header's 18px padding). Drop it onto the row's line so
   it and the Copy link button read as one row. Scoped to this modal — the global rule is shared. */
.modal-window-container.help-topic-modal-container > .modal-window-close {
    top: 18px;
}

/* Tight headers on small screens — keep the icon, drop the label. */
@media (max-width: 600px) {
    .help-topic-modal__copy-link span {
        display: none;
    }
}

.help-topic-modal__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}

.help-topic-modal__error {
    padding: 40px 25px;
    text-align: center;
    color: #666;
}

/* ── Search bar ── */
.help-topic-modal__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
}

.help-topic-modal__search-icon {
    color: #888;
    font-size: 14px;
}

.help-topic-modal__search-input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.help-topic-modal__search-input:focus {
    outline: none;
    border-color: #008080;
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.12);
}

.help-topic-modal__search-results {
    position: absolute;
    top: calc(100% - 4px);
    left: 16px;
    right: 16px;
    max-height: 460px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    z-index: 20;
}

.help-topic-modal__search-result {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid #eee;
    padding: 14px 18px;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s;
}

.help-topic-modal__search-result:last-child {
    border-bottom: none;
}

.help-topic-modal__search-result:hover,
.help-topic-modal__search-result--active {
    background-color: #e6f2f2;
    box-shadow: inset 3px 0 0 #008080;
}

.help-topic-modal__search-result-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #008080;
    margin-bottom: 4px;
}

.help-topic-modal__search-result-snippet {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px;
    color: #666;
    line-height: 1.5;
}

.help-topic-modal__search-result-snippet strong,
.help-topic-modal__search-result-title strong {
    background-color: #fff3bf;
    color: #1a1a1a;
    font-weight: 700;
    border-radius: 2px;
}

.help-topic-modal__search-empty {
    padding: 12px;
    font-size: 13px;
    color: #888;
    text-align: center;
}

/* Sticky footer with the keyboard hint + result count (like the custom select control). */
.help-topic-modal__search-hintbar {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: #f7fafa;
    border-top: 1px solid #e5eaea;
    font-size: 11px;
    color: #8a8a8a;
}

.help-topic-modal__search-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.help-topic-modal__search-hint svg {
    flex-shrink: 0;
    vertical-align: middle;
}

.help-topic-modal__search-stats {
    font-style: italic;
    white-space: nowrap;
}

/* ── Three-column body ── */
/* Fills the remaining height below the search bar; columns scroll internally, so the modal is the
   same size for every topic (short topics no longer shrink it). */
.help-topic-modal__body {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}

/* Darken the topics/toc/content while the search dropdown is open, to draw focus to the results.
   A translucent black scrim (rather than lowered opacity, which just washes toward white). */
.help-topic-modal__body::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.help-topic-modal__body--searching::after {
    opacity: 1;
}

.help-topic-modal__col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid #e0e0e0;
}

.help-topic-modal__col--list,
.help-topic-modal__col--toc {
    flex: 0 0 210px;
}

.help-topic-modal__col--content {
    flex: 1;
    min-width: 0;
    border-right: none;
}

/* Column heading ("Topics" / "Table of contents" / "Content"). */
.help-topic-modal__col-label {
    flex: 0 0 auto;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a8a8a;
    background: #fafafa;
    border-bottom: 1px solid #e0e0e0;
}

.help-topic-modal__list,
.help-topic-modal__toc {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.help-topic-modal__toc-empty {
    padding: 6px 12px;
    font-size: 12px;
    color: #999;
    font-style: italic;
}

.help-topic-modal__list-item,
.help-topic-modal__toc-item {
    text-align: left;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    padding: 8px 12px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    font-family: inherit;
    line-height: 1.35;
}

.help-topic-modal__toc-item {
    font-size: 13px;
    color: #666;
}

.help-topic-modal__list-item:hover,
.help-topic-modal__toc-item:hover {
    background-color: #f0f0f0;
    color: #2c2c2c;
}

.help-topic-modal__list-item--active,
.help-topic-modal__toc-item--active {
    border-left-color: #008080;
    color: #008080;
    font-weight: 600;
    background-color: #e6f2f2;
}

/* Soft grey backdrop so the white content card floats on it (mirrors General Settings' page feel). */
.help-topic-modal__content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 22px 26px;
    background: #eef1f2;
}

/* The fragment root carries its own max-height/overflow for the old single-topic modal;
   inside this viewer the content column is the scroller, so neutralise the nested scroll — and
   dress it up as a raised card/page so the content stands out from the grey backdrop. */
.help-topic-modal__content .help-topic-container {
    max-height: none;
    overflow: visible;
    background: #fff;
    border: 1px solid #e3e6e8;
    border-radius: 10px;
    padding: 30px 36px 36px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

/* ---- Topic content typography ----------------------------------------------------
   Tuned for legibility inside the viewer card: a comfortable colour and line-height,
   a capped reading measure, and a clear heading hierarchy with teal accents. */
.help-topic-modal__content .help-topic-container {
    color: #2c3a3a;
    font-size: 15px;
    line-height: 1.65;
}

/* Guide title. */
.help-topic-modal__content .help-topic-container h3 {
    font-size: 24px;
    font-weight: 700;
    color: #1f2d2d;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e3e6e8;
}

/*.help-topic-modal__content .help-topic-container h4 {*/
/*    !*font-size: 16px;*!*/
/*    !*font-weight: 700;*!*/
/*    color: #00706f;*/
/*    !*margin: 30px 0 10px;*!*/
/*    !*padding-left: 12px;*!*/
/*    !*border-left: 3px solid #008080;*!*/
/*}*/

/*.help-topic-modal__content .help-topic-container h3 {*/
/*    !*font-size: 16px;*!*/
/*    !*font-weight: 700;*!*/
/*    color: #00706f;*/
/*    !*margin: 30px 0 10px;*!*/
/*    !*padding-left: 12px;*!*/
/*    !*border-left: 3px solid #008080;*!*/
/*}*/

/* Step / section headings — teal, with a left accent bar and clear space above. */
.help-topic-modal__content .help-topic-container h5 {
    font-size: 16px;
    font-weight: 700;
    color: #00706f;
    margin: 30px 0 10px;
    padding-left: 12px;
    border-left: 3px solid #008080;
}

/* Links — teal to match the app, with a subtle underline that firms up on hover. */
.help-topic-modal__content .help-topic-container a {
    color: #008080;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 128, 128, 0.35);
    transition: color 0.15s, border-color 0.15s;
}

.help-topic-modal__content .help-topic-container a:hover {
    color: #005b5b;
    border-bottom-color: #005b5b;
}

/* Screenshots — a clean frame and a gentle lift on hover (the global rule does a
   large scale + slide, which is jarring in a document). */
.help-topic-modal__content .help-topic-highlighted-image {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
    border: 1px solid #e3e6e8;
    border-radius: 8px;
    margin: 8px 10px 8px 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.help-topic-modal__content .help-topic-highlighted-image:hover {
    transform: translateY(-2px);
    margin-left: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transition-delay: 0s;
}

/* Grey info boxes inside a topic — align to the General Settings card grey (was a darker #e6e6e6). */
.help-topic-modal__content .help-topic-info-container {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 14px;
}

/* Info box carrying a value plus an icon-only copy button on the right. */
.help-topic-modal__content .help-topic-info-container--copyable {
    display: flex;
    align-items: center;
    gap: 8px;
}

.help-topic-modal__content .help-topic-info-container--copyable > :first-child {
    flex: 1;
    word-break: break-all;
}

.help-topic-modal__content .help-topic-copy-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 14px;
    color: #1a7f7f;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.help-topic-modal__content .help-topic-copy-link:hover {
    background: rgba(26, 127, 127, 0.1);
    color: #15706f;
}

.help-topic-modal__content .help-topic-copy-link:active {
    transform: scale(0.92);
}

/* Inline folder-path pill: a monospaced path with a folder icon on the left, used to call out
   input/output locations in the folder monitor guide. */
/* Inline folder-path pill. The folder icon is baked in via ::before, so the markup is just
   <span class="help-topic-path">O:/some/path</span> — no per-use inline SVG to copy around. */
.help-topic-path {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 10px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-family: "Consolas", "SFMono-Regular", "Menlo", "Monaco", monospace;
    font-size: 0.9em;
    color: #2b3a3a;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 100%;
    overflow-x: auto;
    vertical-align: middle;
}

.help-topic-path::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Z' fill='%23008080' fill-opacity='0.18'/%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Z' stroke='%23008080' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Transient highlight when a search result jumps to a match: a yellow wash that fades out, plus a
   pulsating teal ring to draw the eye. */
.help-topic-modal__match-flash {
    border-radius: 4px;
    animation: help-topic-match-flash 2.6s ease-out forwards;
}

@keyframes help-topic-match-flash {
    0%   { background-color: rgba(255, 224, 130, 0.9); box-shadow: 0 0 0 0 rgba(0, 128, 128, 0.0); }
    8%   { box-shadow: 0 0 0 4px rgba(0, 128, 128, 0.65); }
    22%  { box-shadow: 0 0 0 1px rgba(0, 128, 128, 0.20); }
    36%  { box-shadow: 0 0 0 4px rgba(0, 128, 128, 0.60); }
    50%  { box-shadow: 0 0 0 1px rgba(0, 128, 128, 0.18); }
    64%  { box-shadow: 0 0 0 4px rgba(0, 128, 128, 0.50); }
    70%  { background-color: rgba(255, 224, 130, 0.75); }
    78%  { box-shadow: 0 0 0 1px rgba(0, 128, 128, 0.15); }
    100% { background-color: transparent; box-shadow: 0 0 0 0 rgba(0, 128, 128, 0.0); }
}