// ==========================================================================
// Admin help guide - screen layout + print-friendly stylesheet
// ==========================================================================

@use '../base/variables' as *;

.help-guide {
    max-width: 900px;
    margin: 0 auto $spacing-xl;
    padding: 0 20px;
    color: $color-dark;
    font-family: $font-family-sans;
    line-height: $line-height-base;

    &__cover {
        text-align: center;
        padding: $spacing-lg 0;
        border-bottom: 2px solid $color-primary-dark;
        margin-bottom: $spacing-lg;

        h1 {
            font-size: $font-size-h3;
            margin-bottom: $spacing-sm;
        }
    }

    &__hint {
        color: $color-primary;
        font-size: $font-size-sm;

        kbd {
            background: $color-primary-light;
            border: 1px solid $color-primary-dark;
            border-radius: $radius-sm;
            padding: 2px 6px;
            font-family: monospace;
        }
    }

    &__section {
        margin-bottom: $spacing-lg;

        h2 {
            font-size: $font-size-h4;
            color: $color-primary;
            border-bottom: 1px solid $color-primary-dark;
            padding-bottom: 4px;
            margin-bottom: $spacing-sm;
        }

        ul {
            padding-left: $spacing-sm;
        }

        li {
            margin-bottom: 8px;
        }
    }

    &__table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: $spacing-sm;

        th,
        td {
            text-align: left;
            padding: 10px 12px;
            border: 1px solid $color-primary-dark;
            font-size: $font-size-sm;
            vertical-align: top;
        }

        th {
            background: $color-primary-light;
        }
    }
}

@media print {
    .help-guide__no-print {
        display: none !important;
    }

    body.admin-help-guide {
        background: $color-light;
    }

    .help-guide {
        max-width: none;
        padding: 0;
    }

    .help-guide__section {
        break-inside: avoid;
    }

    .help-guide__table {
        break-inside: avoid;
    }
}