/* Layout */
.layout-shell { display:flex; min-height: calc(100vh - 56px); }
.sidebar-panel { width: 260px; background-color: #f8fafc; border-right: 1px solid #e5e7eb; padding: 1.25rem 1rem; }
.topbar { height:56px; background:#0d6efd; color:#fff; display:flex; align-items:center; padding:0 1rem; }
.topbar .brand { font-weight:700; font-size:1.25rem; }
.badge-pro { background:#16a34a; color:#eaffea; border-radius:.6rem; padding:.15rem .5rem; font-size:.85rem; margin-left:.5rem; }
.content-wrap { display:flex; flex-direction:column; min-height:100vh; }
.content-inner { padding:1.25rem; }
.nav-pills .nav-link { display:flex; align-items:center; gap:.5rem; border-radius:.75rem; padding:.6rem .8rem; color:#0f172a; }
.nav-pills .nav-link.active { background:#0d6efd; color:#fff; }
.sidebar-sep { border-top:1px solid #e5e7eb; margin: 1rem 0; }
.signed-in-label { color:#64748b; font-size:.85rem; margin-bottom:.25rem; }

.invite-modal .input-group-text {
    min-width: 100px;
}

.mobile-ccy {
    width: 11rem;
    max-width: 40vw;
}

.events-badges {
    text-align: right;
}

@media (max-width: 767.98px) {
    .chip-scroller {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .chip-scroller::-webkit-scrollbar {
            display: none;
        }

    .match-list {
        max-height: 40vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-sticky-actions {
        position: sticky;
        bottom: 0;
        z-index: 1020;
        background: var(--bs-body-bg);
        padding: .75rem;
        padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--bs-border-color);
        box-shadow: 0 -2px 10px rgba(0,0,0,.05);
    }

    .btn, .form-control, .form-select, .input-group-text {
        min-height: 44px;
    }

    main, .main-content, body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }
}

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    background-color: #0d6efd; /* Bootstrap blue */
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 8px rgba(0,0,0,.15);
    z-index: 1030;
    padding-bottom: env(safe-area-inset-bottom);
}

    .bottom-nav .nav-item {
        flex: 1;
        text-align: center;
        text-decoration: none;
        color: #fff;
        font-size: 12px;
        padding-top: 4px;
    }

        .bottom-nav .nav-item i {
            display: block;
            font-size: 20px;
            line-height: 1;
        }

    /* Active highlight uses NavLink's "active" class */
    .bottom-nav .active {
        color: #ffc107; /* Bootstrap warning */
    }




.invite-link-textarea {
    min-height: 3rem;
    max-height: 8rem;
    white-space: normal;
    overflow-wrap: anywhere; /* break long URLs */
    word-break: break-all;
    resize: vertical; /* let user expand if needed */
}

@media (max-width: 576px) {
    .invite-link-textarea {
        min-height: 4.5rem; /* a bit taller on mobiles */
    }
}