.standard-button {
    /* Minimum touch target for accessibility */
    min-height: 44px; /* Or 48px, depending on your design system */
    /* Padding drives the width, ensuring text fits comfortably */
    padding: 0 20px; /* 20px horizontal padding on each side */
    /* Visuals - these can vary */
    background-color: #007bff; /* A nice primary blue */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex; /* Allows icon and text to align */
    align-items: center; /* Vertically centers content */
    justify-content: center; /* Horizontally centers content if space allows */
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

    .standard-button:hover {
        background-color: #0056b3;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .standard-button:active {
        background-color: #004085;
        box-shadow: none;
    }
.icon-button {
    min-height: 44px;
    padding: 0 16px 0 12px; /* Slightly more padding on right than left for visual balance with icon */

    background-color: #28a745; /* Success green */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between icon and text */
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

    .icon-button i {
        font-size: 1em; /* Icon size matches text size */
    }

    .icon-button:hover {
        background-color: #218838;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
.icon-only-button {
    /* Ensure visual size meets touch target, even if icon is smaller */
    width: 44px;
    height: 44px; /* Fixed square dimensions for consistency */

    background-color: transparent; /* Often no background, or subtle */
    color: #dc3545; /* Danger red */
    border: 1px solid #dc3545; /* Outlined style common for icon-only */
    border-radius: 50%; /* Make it circular */
    font-size: 20px; /* Larger icon for clarity */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

    .icon-only-button:hover {
        background-color: rgba(220, 53, 69, 0.1); /* Subtle red background on hover */
        color: #a02c38; /* Darker red icon */
        border-color: #a02c38;
    }

    .icon-only-button:active {
        background-color: rgba(220, 53, 69, 0.2);
    }
.small-button {
    height: 32px; /* Visually smaller */
    padding: 0 10px;
    background-color: #ffc107; /* Warning yellow */
    color: #333; /* Dark text for contrast */
    border: none;
    border-radius: 3px;
    font-size: 14px; /* Slightly smaller font */
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

    .small-button:hover {
        background-color: #e0a800;
    }