/* ===== Guide Layout ===== */
:root { --guide-sidebar-width: 265px; --guide-nav-bg: #1a2035; }

.guide-wrapper {
    display: flex;
    height: calc(100vh - var(--guide-nav-offset, 56px));
    overflow: hidden;
    background: #f7f9fc;
}

/* ===== Sidebar ===== */
.guide-sidebar {
    width: var(--guide-sidebar-width);
    min-width: var(--guide-sidebar-width);
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid #ffffff0d;
    flex-shrink: 0;
}

.guide-sidebar-brand {
    padding: 18px 16px 14px;
    font-size: 0.95rem;
    font-weight: 700;
    color: darkblue;
    background: white;
    border-bottom: 1px solid #ffffff12;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.guide-sidebar-brand span { font-size: 1.1rem; }

.guide-nav-list {
    list-style: none;
    padding: 8px 0 20px;
    margin: 0;
    overflow-y: auto;
    flex: 1;
}

.guide-nav-list::-webkit-scrollbar { width: 4px; }
.guide-nav-list::-webkit-scrollbar-track { background: transparent; }
.guide-nav-list::-webkit-scrollbar-thumb { background: #ffffff25; border-radius: 4px; }


.guide-nav-item {
    margin: 1px 0;
    padding-top:10px;
}

.guide-nav-link {
   /* display: flex;*/
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px 9px 10px;
    color: black;
    text-decoration: none;
    font-size: 1.0rem;
    font-weight: 600;
    transition: color 0.15s, background 0.15s;
    border-right: 3px solid transparent;
    cursor: pointer;
    user-select: none;
}

.guide-nav-link:hover { color: #d0dde8; background: #ffffff08; text-decoration: none; }

.guide-nav-link.active {
    color: black;
    border-right-color: #60a5fa;
    background: #60a5fa14;
}

.guide-nav-link .guide-nav-arrow {
    font-size: 0.65rem;
    transition: transform 0.2s;
    opacity: 0.5;
    margin-right: auto;
    margin-left: 0;
    padding-left: 4px;
    color: darkmagenta;
}

.guide-nav-item.open .guide-nav-arrow {
    transform: rotate(90deg);
}

/* Sub navigation */
.guide-nav-sub {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    color: red;
}

.guide-nav-item.open .guide-nav-sub { max-height: 400px; }

.guide-nav-sub li a {
    display: block;
    padding: 5px 16px 5px 12px;
    padding-right: 32px;
    color: darkblue;
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.15s;
}

    .guide-nav-sub li a:hover {
        color: darkblue;
        text-decoration: none;
    }
.guide-nav-sub li a.active { color: darkblue; font-weight: 600; }

/* ===== Main Content ===== */
.guide-main {
    flex: 1;
    overflow-y: auto;
    padding: 0 48px 60px 32px;
    background: #fff;
}

.guide-main:dir(ltr) { padding: 0 32px 60px 48px; }

.guide-main::-webkit-scrollbar { width: 6px; }
.guide-main::-webkit-scrollbar-track { background: #f0f4f8; }
.guide-main::-webkit-scrollbar-thumb { background: #c8d4de; border-radius: 4px; }

/* ===== Sections ===== */
.guide-section {
    padding-top: 44px;
    padding-bottom: 40px;
    border-bottom: 1px solid #edf0f4;
}
.guide-section:last-child { border-bottom: none; }

.guide-section-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
    padding-bottom: 14px;
    border-bottom: 2px solid #3b82f6;
    display: inline-block;
}

.guide-section-subtitle {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 24px;
    margin-top: 0;
}

.guide-section h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f2937;
    margin: 32px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
}

.guide-section h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #374151;
    margin: 22px 0 8px;
}

.guide-section p { font-size: 1.1rem; color: #4b5563; line-height: 1.75; margin-bottom: 10px; }

.guide-section ul, .guide-section ol {
    padding-right: 22px;
    padding-left: 0;
    margin-bottom: 12px;
}

.guide-section li { font-size: 1.1rem; color: #4b5563; line-height: 1.8; }

/* ===== Info Boxes ===== */
.guide-tip, .guide-note, .guide-warning, .guide-important, .guide-amer {
    border-radius: 7px;
    padding: 12px 16px;
    margin: 16px 0;
    font-size: 1.1rem;
    line-height: 1.65;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.guide-tip { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }
.guide-note { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.guide-warning {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}
.guide-important { background: #fdf2f8; border: 1px solid #f9a8d4; color: #831843; }
.guide-amer {
    background: #6610f229;
    border: 1px solid #6610f2a8;
    color: #831843;
}

.guide-tip::before { content: "💡"; flex-shrink: 0; }
.guide-note::before { content: "ℹ️"; flex-shrink: 0; }
.guide-warning::before { content: "⚠️"; flex-shrink: 0; }
.guide-important::before {
    content: '⭐';
    flex-shrink: 0;
}
.guide-amer::before {
    content: '🪐';
    flex-shrink: 0;
}
/*.guide-amer::before {
    content: " ";
    flex-shrink: 0;
}*/

/* ===== Steps ===== */
.guide-steps {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    counter-reset: step;
}

.guide-steps > li {
    counter-increment: step;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 10px 0;
    color: #374151;
    font-size: 1.1rem;
    line-height: 1.7;
    border-bottom: 1px dashed #f0f0f0;
}

.guide-steps > li:last-child { border-bottom: none; }

.guide-steps > li::before {
    content: counter(step);
    min-width: 28px;
    height: 28px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ===== Role tags ===== */
.guide-roles { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 16px; }

.guide-role {
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.guide-role-admin { background: #fee2e2; color: #991b1b; }
.guide-role-supervisor { background: #e0e7ff; color: #3730a3; }
.guide-role-employee { background: #dcfce7; color: #166534; }

/* ===== Table ===== */
.guide-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 0.85rem;
}

.guide-table th {
    background: #f8fafc;
    padding: 10px 14px;
    text-align: right;
    font-weight: 600;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.guide-table td {
    padding: 9px 14px;
    border: 1px solid #f0f2f5;
    color: #4b5563;
    vertical-align: top;
}

.guide-table tr:nth-child(even) td { background: #fafbfc; }

/* ===== Mobile Toggle ===== */
.guide-mobile-bar {
    display: none;
    background: var(--guide-nav-bg);
    color: #fff;
    padding: 10px 16px;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    flex-shrink: 0;
}

/* ===== Help button on pages (base styles in site.css) ===== */

/* ===== Responsive ===== */
@media (max-width: 768px) {

    .guide-nav-link {
        /* display: flex;*/
        align-items: center;
        justify-content: space-between;
        padding: 9px 16px 9px 10px;
        color: black;
        text-decoration: none;
        font-size: 0.855rem;
        font-weight: 600;
        transition: color 0.15s, background 0.15s;
        border-right: 3px solid transparent;
        cursor: pointer;
        user-select: none;
    }

    .guide-section-title {
        font-size: 1.05rem;
        
    }
    .guide-section h2 {
        font-size: 0.9rem;
        
    }
    /* ===== Steps ===== */
    .guide-steps {
        list-style: none;
        padding: 0;
        margin: 16px 0;
        counter-reset: step;
    }

        .guide-steps > li {
            gap: 3px;
            align-items: flex-start;
            padding: 5px 0;
            color: #374151;
        }

            .guide-steps > li:last-child {
                border-bottom: none;
            }

            .guide-steps > li::before {
                content: counter(step);
                min-width: 28px;
                height: 28px;
                background: #3b82f6;
                color: white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.78rem;
                font-weight: 700;
                flex-shrink: 0;
                margin-top: 1px;
            }

    .guide-sidebar {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        z-index: 100;
        transform: translateX(100%);
        transition: transform 0.25s ease;
    }

        .guide-sidebar.open {
            transform: translateX(0);
            box-shadow: -4px 0 20px #00000030;
        }

    .guide-mobile-bar {
        display: flex;
    }

    .guide-main {
        padding: 0 20px 40px;
    }

    .guide-section p {
        font-size: 0.9rem;
    }

    .guide-section li {
        font-size: 0.88rem;
    }

    .guide-steps > li {
        font-size: 0.88rem;
    }
        .guide-steps > li::before {
            content: counter(step);
            min-width: 22px;
            height: 22px;
            background: #3b82f6;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.78rem;
            font-weight: 700;
            flex-shrink: 0;
            margin-top: 1px;
        }


    .guide-tip, .guide-note, .guide-warning, .guide-important {
        font-size: 0.88rem
    }
}