/*
   The styles of the content of the user guides. The page structure comes from
   the documentation template of Onekit (docs.css and docs-rtl.css). This file
   adds only the parts that the guides need and the template does not have:
   the screenshots with their numbered markers, the notes, the required and
   optional labels, the tables on a narrow screen, and the "in preparation"
   page. The rules that depend on the writing direction use logical properties,
   so one file serves the three languages.
*/

/* A link in the address opens a part of the guide. The part is placed under the
   fixed top bar, and the page scrolls smoothly to it. */
html {
    scroll-behavior: smooth;
}

.jump[id] {
    scroll-margin-top: 90px;
}

/* The logo in the top bar. The documentation stylesheet sets a width of 140
   pixels for the logo of the template, which has another shape. The logo of
   MyCloudBook is 446 by 100 pixels, so it keeps its shape through a fixed
   height and an automatic width. */
.main-logo img {
    width: auto;
    height: 46px;
    max-width: none;
}

/* The small tool icon after the name of a section that is not written yet. */
.guides-nav-soon {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    margin-inline-start: .3rem;
    vertical-align: -1px;
    opacity: .45;
}

/* The name of a button, a field, or a menu item as it is written on the screen. */
.guides-ui {
    font-weight: 600;
    color: #212529;
}

/* In the Arabic guides, the texts of the screen stay in English. The browser takes
   the direction of each such text from its own letters, so its punctuation, for
   example "(Admin)" or "Save & New", stays in place inside the right to left text. */
html[dir="rtl"] .guides-ui,
html[dir="rtl"] .bn-content em,
html[dir="rtl"] .bn-content code {
    unicode-bidi: plaintext;
}

/* ---------- Screenshots ---------- */

.guides-figure {
    margin: 1.25rem 0 2rem;
}

.guides-figure-link {
    display: block;
    cursor: zoom-in;
}

.guides-figure img {
    width: 100%;
    height: auto;
    border: 1px solid #dee2e6;
    border-radius: .35rem;
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .06);
}

.guides-figure figcaption {
    margin-top: .6rem;
    font-size: .9rem;
    color: #6c757d;
}

.guides-figure figcaption strong {
    color: #212529;
}

/* The caption inside the window that shows the picture at its full size. */
.lg-sub-html p {
    margin: 0;
}

/* The legend of the numbered markers that are drawn on a screenshot. */
.guides-markers {
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: .35rem 1.5rem;
}

.bn-content .guides-markers li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0;
    line-height: 1.6;
}

.guides-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    margin-top: .15rem;
    border-radius: 50%;
    background: #e53935;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
}

/* ---------- Tables ---------- */

.guides-table-wrap {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.guides-table-wrap .table {
    margin-bottom: 0;
}

.guides-table-wrap .table th {
    background: #f8f8fe;
    font-weight: 500;
    text-align: start;
}

/* The tables of the fields: the first two columns are narrow labels. */
.guides-table-fields th:nth-child(1) {
    width: 9rem;
}

.guides-table-fields th:nth-child(2) {
    width: 6.5rem;
}

.guides-table-fields td:nth-child(1) {
    white-space: nowrap;
}

/* The tables of the messages: three columns of text with similar widths. */
.guides-table-messages th:nth-child(1) {
    width: 34%;
}

.guides-table-messages th:nth-child(2) {
    width: 33%;
}

/* The tables with a short label in the first column, for example the icons. */
.guides-table-labels th:nth-child(1) {
    width: 11rem;
}

/* On a narrow screen the columns of a table become too narrow to read. The
   table keeps a minimum width, and the wrapper scrolls sideways. */
@media (max-width: 767.98px) {
    .guides-table-wrap .table {
        min-width: 640px;
    }
}

.guides-required {
    color: #c62828;
    font-weight: 600;
    white-space: nowrap;
}

.guides-optional {
    color: #2e7d32;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Notes ---------- */

.guides-note {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    border-inline-start: 4px solid #5b2be0;
    border-radius: .25rem;
    background: #f8f8fe;
}

.guides-note.guides-note-warning {
    border-color: #ffcc43;
    background: #fff8e1;
}

.guides-note p:last-child {
    margin-bottom: 0;
}

/* ---------- The "in preparation" page ---------- */

.guides-construction {
    padding: 2rem 1rem 3rem;
    text-align: center;
}

.guides-construction-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    background: #fff3cd;
    color: #a3701b;
}

.guides-construction p {
    max-width: 40rem;
    margin-inline: auto;
}

.guides-construction .btn {
    margin: .25rem;
}

/* ---------- The cards of the overview page ---------- */

.guides-group-card {
    height: 100%;
    padding: 1.25rem 1.5rem;
    border: 1px solid #e9ecef;
    border-radius: .5rem;
    background: #fff;
}

.guides-group-card h3 {
    margin-bottom: .75rem;
    font-size: 1.1rem;
}

.guides-group-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.guides-group-card li {
    padding: .2rem 0;
}

.guides-group-card li a {
    color: #343a40;
}

.guides-group-card li a:hover {
    color: #5b2be0;
}