/*
 * =============================================================================
 * IntaRent Centralized Button Styles
 * =============================================================================
 *
 * USAGE GUIDE FOR CONTRIBUTORS
 * -----------------------------
 * All buttons in the application MUST use these classes:
 *
 *   Base class:   .btn                  (required on every button)
 *   Color:        .btn-blue             Blue  – navigation / edit actions
 *                 .btn-green            Green – positive / success actions
 *                 .btn-purple           Purple – secondary brand actions
 *                 .btn-red              Red   – destructive / danger actions
 *                 .btn-edit             Blue alias – edit-specific actions
 *                 .btn-primary          Purple alias – primary brand color
 *                 .btn-success          Green alias  – success/confirm actions
 *                 .btn-danger           Red alias    – danger/destructive actions
 *                 .btn-secondary        Grey  – neutral/cancel actions
 *                 .btn-info             Cyan  – informational actions
 *                 .btn-warning          Yellow – warning/upgrade prompts
 *                 .btn-white            White – CTAs on colored backgrounds
 *   Size:         .btn-sm               Smaller padding/font
 *                 .btn-lg               Larger padding/font
 *
 *   Container:    .button-group         Wraps multiple buttons side-by-side
 *                                       (stacks vertically on mobile ≤768px)
 *
 * EXAMPLE
 * -------
 *   <!-- Multiple buttons in a row / stacked on mobile -->
 *   <div class="button-group">
 *     <a href="..." class="btn btn-blue">Edit</a>
 *     <a href="..." class="btn btn-green">Save</a>
 *     <a href="..." class="btn btn-red">Delete</a>
 *   </div>
 *
 * DO NOT add ad-hoc inline styles or per-template <style> blocks for buttons.
 * =============================================================================
 */

/* ---------------------------------------------------------------------------
   Base .btn style
   Works for both <button> and <a> elements.
   --------------------------------------------------------------------------- */

button.btn,
a.btn,
.btn {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    font-size: 0.94rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    text-decoration: none !important;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.08);
    margin-bottom: 0.5rem; /* spacing when buttons wrap */
}

/* Default color for bare .btn (no variant class) */
button.btn:not([class*="btn-"]),
a.btn:not([class*="btn-"]),
.btn:not([class*="btn-"]) {
    background: #0b84ff;
}
button.btn:not([class*="btn-"]):hover,
a.btn:not([class*="btn-"]):hover,
.btn:not([class*="btn-"]):hover {
    background: #5c87bf;
}

/* ---------------------------------------------------------------------------
   .button-group container
   Desktop: horizontal row with gap.
   Mobile (≤768px): vertical stack, buttons stretch to full width.
   --------------------------------------------------------------------------- */

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 768px) {
    .button-group {
        flex-direction: column;
        align-items: stretch;
    }

    .button-group .btn,
    .button-group a.btn,
    .button-group button.btn {
        width: 100%;
        text-align: center;
        margin-bottom: 0;
    }
}

/* ---------------------------------------------------------------------------
   Legacy container classes – kept for backwards compatibility.
   Prefer .button-group for new code.
   --------------------------------------------------------------------------- */

.quick-actions,
.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.quick-actions a,
.quick-actions button,
.action-buttons a,
.action-buttons button {
    display: inline-block;
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .quick-actions,
    .action-buttons {
        flex-direction: column;
    }

    .quick-actions a,
    .quick-actions button,
    .action-buttons a,
    .action-buttons button {
        width: 100%;
        margin-bottom: 0.75rem;
        text-align: center;
    }

    .quick-actions a:last-child,
    .quick-actions button:last-child,
    .action-buttons a:last-child,
    .action-buttons button:last-child {
        margin-bottom: 0;
    }
}

/* ---------------------------------------------------------------------------
   Size variants
   --------------------------------------------------------------------------- */

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.04rem;
}

/* ---------------------------------------------------------------------------
   Color variants
   Every variant covers both <button> and <a> elements, including all
   pseudo-classes (:link, :visited, :hover, :focus, :active) to reliably
   override browser default link styling.
   --------------------------------------------------------------------------- */

/* Blue – navigation / edit actions */
button.btn-blue,
a.btn-blue,
.btn.btn-blue {
    background: #0b84ff !important;
    color: #fff !important;
    text-decoration: none !important;
}
button.btn-blue:hover, button.btn-blue:focus, button.btn-blue:active,
a.btn-blue:link, a.btn-blue:visited,
a.btn-blue:hover, a.btn-blue:focus, a.btn-blue:active,
.btn.btn-blue:hover, .btn.btn-blue:focus, .btn.btn-blue:active {
    background: #69a3e0 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Edit – alias for blue, for edit-specific actions */
button.btn-edit,
a.btn-edit,
.btn.btn-edit {
    background: #0b84ff !important;
    color: #fff !important;
    text-decoration: none !important;
}
button.btn-edit:hover, button.btn-edit:focus, button.btn-edit:active,
a.btn-edit:link, a.btn-edit:visited,
a.btn-edit:hover, a.btn-edit:focus, a.btn-edit:active,
.btn.btn-edit:hover, .btn.btn-edit:focus, .btn.btn-edit:active {
    background: #69a3e0 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Green – positive / success actions */
button.btn-green,
a.btn-green,
.btn.btn-green {
    background: #28a745 !important;
    color: #fff !important;
    text-decoration: none !important;
}
button.btn-green:hover, button.btn-green:focus, button.btn-green:active,
a.btn-green:link, a.btn-green:visited,
a.btn-green:hover, a.btn-green:focus, a.btn-green:active,
.btn.btn-green:hover, .btn.btn-green:focus, .btn.btn-green:active {
    background: #218838 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Success – alias for green */
button.btn-success,
a.btn-success,
.btn.btn-success {
    background: #28a745 !important;
    color: #fff !important;
    text-decoration: none !important;
}
button.btn-success:hover, button.btn-success:focus, button.btn-success:active,
a.btn-success:link, a.btn-success:visited,
a.btn-success:hover, a.btn-success:focus, a.btn-success:active,
.btn.btn-success:hover, .btn.btn-success:focus, .btn.btn-success:active {
    background: #218838 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Purple – secondary brand actions */
button.btn-purple,
a.btn-purple,
.btn.btn-purple {
    background: #9b59b6 !important;
    color: #fff !important;
    text-decoration: none !important;
}
button.btn-purple:hover, button.btn-purple:focus, button.btn-purple:active,
a.btn-purple:link, a.btn-purple:visited,
a.btn-purple:hover, a.btn-purple:focus, a.btn-purple:active,
.btn.btn-purple:hover, .btn.btn-purple:focus, .btn.btn-purple:active {
    background: #8e44ad !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Primary – alias for purple (brand primary) */
button.btn-primary,
a.btn-primary,
.btn.btn-primary {
    background: #764ba2 !important;
    color: #fff !important;
    text-decoration: none !important;
}
button.btn-primary:hover, button.btn-primary:focus, button.btn-primary:active,
a.btn-primary:link, a.btn-primary:visited,
a.btn-primary:hover, a.btn-primary:focus, a.btn-primary:active,
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active {
    background: #667eea !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Red – destructive / danger actions */
button.btn-red,
a.btn-red,
.btn.btn-red {
    background: #dc3545 !important;
    color: #fff !important;
    text-decoration: none !important;
    border: none;
}
button.btn-red:hover, button.btn-red:focus, button.btn-red:active,
a.btn-red:link, a.btn-red:visited,
a.btn-red:hover, a.btn-red:focus, a.btn-red:active,
.btn.btn-red:hover, .btn.btn-red:focus, .btn.btn-red:active {
    background: #c82333 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Danger – alias for red */
button.btn-danger,
a.btn-danger,
.btn.btn-danger {
    background: #dc3545 !important;
    color: #fff !important;
    text-decoration: none !important;
    border: none;
}
button.btn-danger:hover, button.btn-danger:focus, button.btn-danger:active,
a.btn-danger:link, a.btn-danger:visited,
a.btn-danger:hover, a.btn-danger:focus, a.btn-danger:active,
.btn.btn-danger:hover, .btn.btn-danger:focus, .btn.btn-danger:active {
    background: #c82333 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Secondary – neutral / cancel actions */
button.btn-secondary,
a.btn-secondary,
.btn.btn-secondary {
    background: #6c757d !important;
    color: #fff !important;
    text-decoration: none !important;
}
button.btn-secondary:hover, button.btn-secondary:focus, button.btn-secondary:active,
a.btn-secondary:link, a.btn-secondary:visited,
a.btn-secondary:hover, a.btn-secondary:focus, a.btn-secondary:active,
.btn.btn-secondary:hover, .btn.btn-secondary:focus, .btn.btn-secondary:active {
    background: #5a6268 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Info – cyan for informational actions */
button.btn-info,
a.btn-info,
.btn.btn-info {
    background: #17a2b8 !important;
    color: #fff !important;
    text-decoration: none !important;
}
button.btn-info:hover, button.btn-info:focus, button.btn-info:active,
a.btn-info:link, a.btn-info:visited,
a.btn-info:hover, a.btn-info:focus, a.btn-info:active,
.btn.btn-info:hover, .btn.btn-info:focus, .btn.btn-info:active {
    background: #138496 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Warning – yellow/orange for warning actions */
button.btn-warning,
a.btn-warning,
.btn.btn-warning {
    background: #ffc107 !important;
    color: #212529 !important;
    text-decoration: none !important;
}
button.btn-warning:hover, button.btn-warning:focus, button.btn-warning:active,
a.btn-warning:link, a.btn-warning:visited,
a.btn-warning:hover, a.btn-warning:focus, a.btn-warning:active,
.btn.btn-warning:hover, .btn.btn-warning:focus, .btn.btn-warning:active {
    background: #e0a800 !important;
    color: #212529 !important;
    text-decoration: none !important;
}

/* White – for CTAs on colored/gradient backgrounds */
button.btn-white,
a.btn-white,
.btn.btn-white {
    background: white !important;
    color: #667eea !important;
    text-decoration: none !important;
}
button.btn-white:hover, button.btn-white:focus, button.btn-white:active,
a.btn-white:link, a.btn-white:visited,
a.btn-white:hover, a.btn-white:focus, a.btn-white:active,
.btn.btn-white:hover, .btn.btn-white:focus, .btn.btn-white:active {
    background: #f0f0f0 !important;
    color: #667eea !important;
    text-decoration: none !important;
}

/* Spacing when .button-group appears inside a card after content rows */
.item-card .button-group {
    margin-top: 0.5rem;
}


@media (max-width: 600px) {
    button.btn,
    a.btn,
    .btn {
        width: 100%;
        font-size: 0.99rem;
        padding: 0.8rem 0;
        text-align: center;
    }
}