/*
 * The Lounge unified button system
 *
 * Shared by:
 * - normal subscriber pages
 * - /management
 * - Mumble Manager
 *
 * Existing semantic classes determine color.
 * This file is intentionally loaded LAST so older
 * gradient/button rules do not override it.
 */

:root {
    --btn-bg: #151d24;
    --btn-bg-hover: #1a252e;
    --btn-border: rgba(148, 163, 184, .22);
    --btn-border-hover: rgba(148, 163, 184, .42);
    --btn-text: #dbe5ef;

    --btn-green: #45e38b;
    --btn-green-bg: rgba(69, 227, 139, .08);
    --btn-green-border: rgba(69, 227, 139, .30);

    --btn-yellow: #f6d365;
    --btn-yellow-bg: rgba(246, 211, 101, .08);
    --btn-yellow-border: rgba(246, 211, 101, .30);

    --btn-orange: #ff9f43;
    --btn-orange-bg: rgba(255, 159, 67, .08);
    --btn-orange-border: rgba(255, 159, 67, .30);

    --btn-red: #ff5d5d;
    --btn-red-bg: rgba(255, 93, 93, .08);
    --btn-red-border: rgba(255, 93, 93, .30);

    --btn-purple: #b695ff;
    --btn-purple-bg: rgba(182, 149, 255, .08);
    --btn-purple-border: rgba(182, 149, 255, .30);
}


/* ---------------------------------------------------------
 * UNIVERSAL BUTTON BASE
 * --------------------------------------------------------- */

button,
.button,
.action-button,
a.button {
    appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: auto;
    min-height: 38px;

    padding: 9px 13px;

    box-sizing: border-box;

    background: var(--btn-bg) !important;
    color: var(--btn-text) !important;

    border: 1px solid var(--btn-border) !important;
    border-radius: 8px !important;

    box-shadow: none !important;

    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .10s ease,
        opacity .15s ease;
}

button:hover,
.button:hover,
.action-button:hover,
a.button:hover {
    background: var(--btn-bg-hover) !important;
    border-color: var(--btn-border-hover) !important;

    filter: none !important;

    box-shadow:
        0 0 0 3px rgba(148, 163, 184, .06) !important;
}

button:active,
.button:active,
.action-button:active,
a.button:active {
    transform: translateY(1px);
}

button:focus-visible,
.button:focus-visible,
.action-button:focus-visible,
a.button:focus-visible {
    outline: none;

    border-color: rgba(96, 165, 250, .65) !important;

    box-shadow:
        0 0 0 3px rgba(96, 165, 250, .12) !important;
}

button:disabled,
.button:disabled,
.action-button:disabled {
    opacity: .38 !important;
    cursor: not-allowed;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}


/* ---------------------------------------------------------
 * POSITIVE / APPLY / START
 * --------------------------------------------------------- */

.button-apply,
.action-start,
.health-check-button-modern,
.server-management-button-start,
.admin-discord-bot-submit {
    color: var(--btn-green) !important;
    background: var(--btn-green-bg) !important;
    border-color: var(--btn-green-border) !important;
}

.button-apply:hover,
.action-start:hover,
.health-check-button-modern:hover,
.server-management-button-start:hover,
.admin-discord-bot-submit:hover {
    color: #72efa8 !important;
    background: rgba(69, 227, 139, .13) !important;
    border-color: rgba(69, 227, 139, .55) !important;

    box-shadow:
        0 0 0 3px rgba(69, 227, 139, .08) !important;
}


/* ---------------------------------------------------------
 * WARNING / RESTART
 * --------------------------------------------------------- */

.action-restart,
.server-management-button-restart {
    color: var(--btn-orange) !important;
    background: var(--btn-orange-bg) !important;
    border-color: var(--btn-orange-border) !important;
}

.action-restart:hover,
.server-management-button-restart:hover {
    color: #ffb86c !important;
    background: rgba(255, 159, 67, .13) !important;
    border-color: rgba(255, 159, 67, .55) !important;

    box-shadow:
        0 0 0 3px rgba(255, 159, 67, .08) !important;
}


/* ---------------------------------------------------------
 * DESTRUCTIVE / REMOVE / STOP
 * --------------------------------------------------------- */

.button-clear,
.action-stop,
.server-management-button-stop,
.server-management-remove-role,
[data-sm-remove-role],
[data-sm-remove-security-user],
[data-action="remove-security-alert-user"] {
    color: var(--btn-red) !important;
    background: var(--btn-red-bg) !important;
    border-color: var(--btn-red-border) !important;
}

.button-clear:hover,
.action-stop:hover,
.server-management-button-stop:hover,
.server-management-remove-role:hover,
[data-sm-remove-role]:hover,
[data-sm-remove-security-user]:hover,
[data-action="remove-security-alert-user"]:hover {
    color: #ff8585 !important;
    background: rgba(255, 93, 93, .13) !important;
    border-color: rgba(255, 93, 93, .55) !important;

    box-shadow:
        0 0 0 3px rgba(255, 93, 93, .08) !important;
}


/* ---------------------------------------------------------
 * EXEMPT / SPECIAL ADMIN STATE
 * --------------------------------------------------------- */

.billing-mark-exempt,
.billing-state-pill-exempt {
    color: var(--btn-purple) !important;
    background: var(--btn-purple-bg) !important;
    border-color: var(--btn-purple-border) !important;
}

.billing-mark-exempt:hover,
.billing-state-pill-exempt:hover {
    color: #cab6ff !important;
    background: rgba(182, 149, 255, .13) !important;
    border-color: rgba(182, 149, 255, .55) !important;
}


/* ---------------------------------------------------------
 * MUMBLE MANAGER LAUNCHER BUTTONS
 *
 * These are navigation tiles, so retain their larger shape,
 * but use the same modern visual system rather than gradients.
 * --------------------------------------------------------- */

.admin-manager-action-button {
    position: relative;

    width: 100%;
    min-height: 52px;

    padding: 12px 16px;

    background: var(--btn-bg) !important;
    color: var(--btn-text) !important;

    border: 1px solid var(--btn-border) !important;
    border-radius: 10px !important;

    box-shadow: none !important;

    overflow: hidden;
}

.admin-manager-action-button:hover {
    transform: translateY(-1px);

    background: var(--btn-bg-hover) !important;

    border-color:
        rgba(148, 163, 184, .42) !important;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, .18) !important;
}

/* Retain the small category accent on launcher tiles. */
.admin-manager-action-button::before {
    width: 3px !important;
}


/* ---------------------------------------------------------
 * MODAL CLOSE
 * --------------------------------------------------------- */

.admin-mumble-minimize {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;

    padding: 0 !important;

    border-radius: 50% !important;

    font-size: 20px !important;
    line-height: 1 !important;

    color: #aeb9c7 !important;
}

.admin-mumble-minimize:hover {
    color: #ffffff !important;

    background: rgba(255, 255, 255, .08) !important;
}


/* ---------------------------------------------------------
 * ADD / REMOVE ROW CONTROLS
 * --------------------------------------------------------- */

.server-management-add-role,
[data-action="add-security-alert-user"] {
    width: auto !important;
}


/* ---------------------------------------------------------
 * COPY BUTTONS
 * --------------------------------------------------------- */

.admin-bot-invite-copy-button,
[data-action="copy-provisioning-discord-invite"] {
    color: #7dd3fc !important;
    background: rgba(125, 211, 252, .07) !important;
    border-color: rgba(125, 211, 252, .28) !important;
}

.admin-bot-invite-copy-button:hover,
[data-action="copy-provisioning-discord-invite"]:hover {
    color: #bae6fd !important;
    background: rgba(125, 211, 252, .12) !important;
    border-color: rgba(125, 211, 252, .50) !important;
}


/* ---------------------------------------------------------
 * SECONDARY / BACK BUTTONS
 * --------------------------------------------------------- */

.mumble-access-secondary-button,
.back-link {
    color: #aeb9c7 !important;
}


/* ---------------------------------------------------------
 * RESPONSIVE
 * --------------------------------------------------------- */

@media (max-width: 700px) {
    button,
    .button,
    .action-button,
    a.button {
        max-width: 100%;
    }

    .admin-manager-action-button {
        width: 100%;
    }
}

/* Server Management - Save Discord Configuration */
#server-management-discord-form button[type="submit"],
#server-management-discord-form .button-apply {
    width: auto !important;
    min-height: 38px !important;
    padding: 9px 13px !important;

    background: rgba(69, 227, 139, .08) !important;
    color: #45e38b !important;

    border: 1px solid rgba(69, 227, 139, .30) !important;
    border-radius: 8px !important;

    box-shadow: none !important;
    filter: none !important;

    font-size: 14px !important;
    font-weight: 800 !important;
}

#server-management-discord-form button[type="submit"]:hover,
#server-management-discord-form .button-apply:hover {
    background: rgba(69, 227, 139, .13) !important;
    color: #72efa8 !important;
    border-color: rgba(69, 227, 139, .55) !important;

    box-shadow:
        0 0 0 3px rgba(69, 227, 139, .08) !important;
}

/* ---------------------------------------------------------
 * MUMBLE MANAGER
 * Force old solid buttons into unified modern button system
 * --------------------------------------------------------- */

.admin-mumble-page .button,
.admin-mumble-modal .button {
    width: auto !important;
    min-height: 38px !important;

    padding: 9px 13px !important;

    border-radius: 8px !important;

    box-shadow: none !important;
    filter: none !important;

    font-size: 14px !important;
    font-weight: 800 !important;
}


/* Apply / positive actions:
 * Apply Filters, Unban, Extend, Upload, Save, etc.
 */
.admin-mumble-page .button.button-apply,
.admin-mumble-modal .button.button-apply {
    color: #45e38b !important;

    background:
        rgba(69, 227, 139, .08) !important;

    border-color:
        rgba(69, 227, 139, .30) !important;
}

.admin-mumble-page .button.button-apply:hover,
.admin-mumble-modal .button.button-apply:hover {
    color: #72efa8 !important;

    background:
        rgba(69, 227, 139, .13) !important;

    border-color:
        rgba(69, 227, 139, .55) !important;

    box-shadow:
        0 0 0 3px rgba(69, 227, 139, .08)
        !important;
}


/* Destructive actions:
 * Clear Filters, Ban, Revoke, Reset All Access and Data
 */
.admin-mumble-page .button.button-clear,
.admin-mumble-modal .button.button-clear {
    color: #ff5d5d !important;

    background:
        rgba(255, 93, 93, .08) !important;

    border-color:
        rgba(255, 93, 93, .30) !important;

    box-shadow: none !important;
}

.admin-mumble-page .button.button-clear:hover,
.admin-mumble-modal .button.button-clear:hover {
    color: #ff8585 !important;

    background:
        rgba(255, 93, 93, .13) !important;

    border-color:
        rgba(255, 93, 93, .55) !important;

    box-shadow:
        0 0 0 3px rgba(255, 93, 93, .08)
        !important;
}


/*
 * Reset All Access and Data currently has inline red
 * border/glow styles. !important above intentionally
 * overrides those old inline visual properties.
 */