/* ==========================================================================
 * U2SMS — UI overrides
 * Loaded last (after vendors, theme, page, and overrides.css) so these rules
 * win specificity ties without needing !important on every line.
 *
 * Sections:
 *   1. Buttons — flatter, smaller, consistent across variants
 *   2. Auth pages — basic centered card (no illustration column)
 *   3. Chat — remove the repeating illustration background
 * ========================================================================== */


/* ---------- 1. Buttons ---------- */
.btn,
.btn.btn-icon {
    border-radius: 4px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.4;
    text-transform: none;
    box-shadow: none;
    transition: background-color 150ms ease, border-color 150ms ease,
                color 150ms ease, box-shadow 150ms ease;
}

.btn-sm,
.btn-group-sm > .btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: 3px;
}

.btn-lg,
.btn-group-lg > .btn {
    padding: 0.65rem 1.25rem;
    font-size: 0.9375rem;
    border-radius: 4px;
}

.btn-icon {
    padding: 0.4rem;
    width: auto;
    height: auto;
    line-height: 1;
}

.btn:hover {
    /* hover is a subtle 1px lift, not a glow */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
    transform: none;
}

.btn:focus,
.btn:focus-visible,
.btn:active {
    box-shadow: 0 0 0 2px rgba(115, 103, 240, 0.18);
    outline: none;
}

/* Tactical primary — flat fill, no shadow */
.btn-primary {
    box-shadow: none !important;
}

/* Outline buttons sit at the same visual weight as filled */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-dark,
.btn-outline-light {
    border-width: 1px;
    background-color: transparent;
}

/* Pill / radius-100 utility kept consistent for chip patterns */
.btn.rounded-pill {
    border-radius: 999px;
}

/* Match form-control height so adjacent input + button line up */
.input-group .btn,
.input-group .form-control {
    min-height: 2.4rem;
}

/* Floating action / round-icon buttons stay sharp */
.btn.btn-icon.rounded-circle {
    border-radius: 4px;
}


/* ---------- 2. Auth pages — minimal centered layout ---------- */

/* Hide the cover-illustration column entirely if a Blade still uses
   .auth-cover. The login Blade itself is now switched to .auth-basic, but
   this catches any other auth view (forgot/reset/register) that hasn't been
   updated yet. */
.auth-wrapper.auth-cover .auth-inner > .col-lg-8 {
    display: none !important;
}
.auth-wrapper.auth-cover .auth-inner > .col-lg-4 {
    flex: 0 0 auto !important;
    max-width: 480px !important;
    margin: 0 auto !important;
}

/* Native auth-basic spacing — center the card with a comfortable margin.
 * The auth wrapper is the lowest z-layer; the flanking GIFs and the card
 * render above this background automatically (DOM child > parent bg). */
.auth-wrapper.auth-basic {
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
    background-color: var(--bs-body-bg, #f8f8f8);
    /* Two copies of the GIF, side-by-side, each full-height. With
     * background-attachment: fixed the sizes are relative to the viewport,
     * so 50% / 100% reads as 50vw × 100vh per copy. */
    background-image:
        url('https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExZGg5OHJxbWFocjNtemtqYWd2ZXUzZ3R6YXFkdDYyeTFnOTd4N2N1OSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/M8zfZXu3z7OnDY9grz/giphy.gif'),
        url('https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExZGg5OHJxbWFocjNtemtqYWd2ZXUzZ3R6YXFkdDYyeTFnOTd4N2N1OSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/M8zfZXu3z7OnDY9grz/giphy.gif');
    background-position: left center, right center;
    background-size: 50% 100%, 50% 100%;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
}
.auth-wrapper.auth-basic .auth-inner {
    width: 100%;
    max-width: 1100px;          /* widen so flanking deco fits on the sides */
    margin: 0 auto;
}
.auth-wrapper.auth-basic .card {
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    width: 100%;
    max-width: 420px;           /* card itself stays narrow */
    flex: 0 0 420px;
}

/* Decorative GIFs flanking the auth card — hidden on small screens. */
.u2sms-auth-deco {
    width: 260px;
    height: auto;
    max-height: 360px;
    object-fit: contain;
    flex-shrink: 0;
    pointer-events: none;
    user-select: none;
}
.u2sms-auth-deco-right {
    transform: scaleX(-1);
}
@media (min-width: 1400px) {
    .u2sms-auth-deco {
        width: 320px;
        max-height: 420px;
    }
}
.auth-wrapper.auth-basic .brand-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    margin-top: 0;
    position: static;
}
.auth-wrapper.auth-basic .brand-logo img {
    max-height: 56px;
    width: auto;
}

/* Dark-layout auth */
.dark-layout .auth-wrapper.auth-basic {
    background-color: #161d31;
}
.dark-layout .auth-wrapper.auth-basic .card {
    background-color: #283046;
    border-color: rgba(255, 255, 255, 0.06);
}


/* ---------- 3. Chatbox — remove illustration background ----------
 *
 * Vuexy ships a base64-inlined "I Like Food" SVG pattern via
 * $chat-bg-light / $chat-bg-dark in _variables.scss. The real DOM
 * wrapper class is .chat-application (NOT .app-chat). The dark theme
 * adds a third class to the selector chain, so we match its specificity
 * and use !important on the bg image to beat the inline base64.
 */
.chat-application .chat-app-window .start-chat-area,
.chat-application .chat-app-window .user-chats,
.chat-application .start-chat-area,
.chat-application .user-chats {
    background-image: none !important;
    background-color: #f8f8f8 !important;
}

.dark-layout .chat-application .chat-app-window .start-chat-area,
.dark-layout .chat-application .chat-app-window .user-chats,
.dark-layout .chat-application .start-chat-area,
.dark-layout .chat-application .user-chats {
    background-image: none !important;
    background-color: #1e1e2c !important;
}

/* Slightly tighter chat message bubbles to match the new button radius */
.chat-application .chats .chat .chat-body .chat-content {
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
    box-shadow: none;
}