<div class="manual-category">
    Account setup
</div>

<div class="manual-card">
    <h3>Registering an account</h3>

    <p>To create a new account:</p>

    <ul>
        <li>Open the registration page.</li>
        <li>Enter the email address that will be associated with your account.</li>
        <li>Choose a username for logging into the system.</li>
        <li>Create a password that:
            <ul>
                <li>Contains at least 8 characters</li>
                <li>Contains both letters and numbers</li>
                <li>Contains at least one special character</li>
            </ul>
        </li>
        <li>Re-enter the same password for confirmation.</li>
        <li>Click the <strong>Register</strong> button.</li>
    </ul>

    <p>
        After successful registration, a confirmation message will appear and you will be redirected to the login page.
    </p>
</div>

<div class="manual-card">
    <h3>Logging in</h3>

    <ul>
        <li>Open the login page.</li>
        <li>Enter your registered username and password.</li>
        <li>Click the <strong>Log In</strong> button.</li>
    </ul>

    <p>
        After successful authentication, the dashboard containing your orders will be displayed.
    </p>
</div>

<div class="manual-category">
    Order management
</div>

<div class="manual-card">
    <h3>Viewing orders</h3>

    <p>
        After logging in, the main dashboard displays all orders associated with your account.
    </p>

    <p>The order table contains:</p>

    <ul>
        <li>Commission type</li>
        <li>Customer</li>
        <li>Order status</li>
        <li>Payment status</li>
        <li>Last update date</li>
    </ul>

    <p>
        To view complete information about an order, click on its entry in the table.
    </p>
</div>

<div class="manual-card">
    <h3>Adding a new order</h3>

    <p>
        To create a new commission entry:
    </p>

    <ol>
        <li>Click the <strong>Add New</strong> button on the dashboard.</li>
        <li>Fill in the required information:
            <ul>
                <li>Commission type</li>
                <li>Customer information</li>
                <li>Character references</li>
                <li>Payment details</li>
                <li>Additional notes</li>
            </ul>
        </li>
        <li>Add multiple character links if needed using the <strong>+</strong> button.</li>
        <li>Click <strong>Submit</strong>.</li>
    </ol>

    <p>
        The order will be added to your list and the form will close automatically.
    </p>
</div>

<div class="manual-card">
    <h3>Editing an order</h3>

    <ol>
        <li>Open the selected order.</li>
        <li>Click <strong>Edit</strong> next to the field you wish to modify.</li>
        <li>Update the information.</li>
        <li>Click <strong>Save Changes</strong>.</li>
    </ol>

    <p>
        The system will save your changes and refresh the displayed information.
    </p>
</div>

<div class="manual-card">
    <h3>Deleting an order</h3>

    <ol>
        <li>Open the selected order.</li>
        <li>Click the <strong>Delete</strong> button.</li>
        <li>Confirm the deletion.</li>
    </ol>

    <p>
        Deleted orders are permanently removed from the system and can no longer be restored.
    </p>
</div>

<div class="manual-category">
    Form management
</div>

<div class="manual-card">
    <h3>Managing forms</h3>

    <p>
        The Forms page allows you to manage customer order forms.
    </p>

    <p>Available actions include:</p>

    <ul>
        <li>Viewing existing forms</li>
        <li>Creating new forms</li>
        <li>Activating forms</li>
        <li>Deactivating forms</li>
        <li>Deleting forms</li>
    </ul>
</div>

<div class="manual-card">
    <h3>Creating a form</h3>

    <ol>
        <li>Open the Forms page.</li>
        <li>Click <strong>Add New</strong>.</li>
        <li>Provide:
            <ul>
                <li>Commission type</li>
                <li>Commission price</li>
                <li>Form title</li>
            </ul>
        </li>
        <li>Click <strong>Save Form</strong>.</li>
    </ol>

    <p>
        After saving, the form will appear in the forms list automatically.
    </p>
</div>

<div class="manual-card">
    <h3>Changing form status</h3>

    <p>
        Each form can have one of the following statuses:
    </p>

    <div class="manual-status">
        <strong>Active</strong><br>
        Customers can access and submit the form.
    </div>

    <div class="manual-status">
        <strong>Expired</strong><br>
        The form is unavailable and can no longer receive submissions.
    </div>

    <p>
        Status can be changed directly from the Forms page using the available action buttons.
    </p>
</div>

<div class="manual-category">
    Session management
</div>

<div class="manual-card">
    <h3>Logging out</h3>

    <p>
        When you finish working in the system, it is recommended to end your session.
    </p>

    <ol>
        <li>Click the <strong>Logout</strong> button in the navigation menu.</li>
    </ol>

    <p>
        Logging out protects your account and prevents unauthorized access to your information.
    </p>
</div>