/* =========================================================
   CLANS — page-scoped CSS
   Scope: body.mbp-clans
   Canon:
   - align visual language to Houses
   - keep Clans table structure
   - search card + table card separated
========================================================= */

body.mbp-clans{
    --max: 1280px;
}

body.mbp-clans .wrap{
    max-width: var(--max);
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

body.mbp-clans .hero{
    text-align:center;
    padding-top:10px;
    padding-bottom:34px;
}

body.mbp-clans .hero h1{
    margin:0 0 10px 0;
    color:#d6b062;
    text-shadow:
        0 0 10px rgba(214,176,98,.16),
        0 0 24px rgba(214,176,98,.08);
}

body.mbp-clans .hero p{
    max-width:700px;
    margin:0 auto;
    color:rgba(255,255,255,.82);
}

/* ---------------------------------------------------------
   SEARCH CARD
--------------------------------------------------------- */

body.mbp-clans .home-search-card{
    margin-top:26px;
    border:1px solid rgba(124,92,255,.14);
    background:
        linear-gradient(180deg, rgba(10,12,19,.74), rgba(7,9,15,.64));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 18px 40px rgba(0,0,0,.22);
}

body.mbp-clans .mbp-clans-filters{
    margin:0 auto;
}

body.mbp-clans .mbp-clans-filters-row{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    flex-wrap:nowrap;
}

body.mbp-clans .mbp-clans-filterblock-left{
    flex:1 1 auto;
    min-width:0;
}

body.mbp-clans .mbp-clans-filterblock-right{
    flex:0 0 auto;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
}

body.mbp-clans .mbp-filter-label{
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.85;
    margin:0 0 6px 0;
}

body.mbp-clans .input{
    width:100%;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
    color:var(--text);
    outline:none;
}

body.mbp-clans .input:focus{
    border-color:rgba(155,123,255,.55);
    box-shadow:0 0 0 2px rgba(155,123,255,.20);
}

body.mbp-clans .mbp-clans-filterblock-actions{
    display:flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
}

/* ---------------------------------------------------------
   TABLE CARD
--------------------------------------------------------- */

body.mbp-clans .clans-table-card{
    margin-top:22px;
    margin-bottom:34px;
    border:1px solid rgba(124,92,255,.14);
    background:
        linear-gradient(180deg, rgba(9,11,18,.80), rgba(7,9,15,.72));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 18px 40px rgba(0,0,0,.24);
}

body.mbp-clans .mbp-clans-tablewrap{
    margin:0 auto;
    overflow-x:visible;
    padding-top:4px;
    padding-bottom:30px;
}

@media (max-width: 1180px){
    body.mbp-clans .mbp-clans-tablewrap{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
}

body.mbp-clans .mbp-clans-table{
    width:100%;
    min-width:1120px;
    table-layout:fixed;
    border-collapse:collapse;
    margin-bottom:0;
}

body.mbp-clans .mbp-clans-table thead th{
    text-align:left;
    vertical-align:middle;
    padding:10px 10px 12px 10px;
    font-family:var(--font-head);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.78);
    opacity:.88;
    white-space:nowrap;
}

body.mbp-clans .mbp-clans-table tbody td{
    padding:10px 10px;
    font-family:var(--font-body);
    font-size:14px;
    line-height:1.3;
    vertical-align:top;
    border-top:1px solid rgba(255,255,255,.05);
}

body.mbp-clans .mbp-clans-table th.mbp-col-order,
body.mbp-clans .mbp-clans-table td.mbp-col-order,
body.mbp-clans .mbp-clans-table th.mbp-col-members,
body.mbp-clans .mbp-clans-table td.mbp-col-members,
body.mbp-clans .mbp-clans-table th.mbp-col-view,
body.mbp-clans .mbp-clans-table td.mbp-col-view{
    text-align:center;
    vertical-align:middle;
    white-space:nowrap;
}

/* rank badge */
body.mbp-clans .mbp-rank{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:999px;
    border:1px solid rgba(200,170,90,.55);
    background:rgba(200,170,90,.14);
    font-size:12px;
    font-weight:700;
    color:#f0e6cf;
}

/* clan name */
body.mbp-clans .mbp-col-clan{
    vertical-align:middle;
}

body.mbp-clans .mbp-clans-name{
    display:block;
    min-width:0;
}

body.mbp-clans .mbp-clans-name-text{
    display:block;
    width:100%;
    text-align:left;
    font-size:15px;
    font-weight:700;
    line-height:1.28;
    white-space:normal;
    overflow-wrap:break-word;
    word-break:normal;
    text-decoration:none;
}

body.mbp-clans .mbp-clans-name-text:hover{
    color:#e1b65a;
}

/* role columns */
body.mbp-clans .mbp-col-sovereign,
body.mbp-clans .mbp-col-cosovereign,
body.mbp-clans .mbp-col-ambassador,
body.mbp-clans .mbp-col-proxy{
    white-space:normal;
    overflow-wrap:break-word;
    word-break:normal;
}

body.mbp-clans .mbp-col-sovereign a,
body.mbp-clans .mbp-col-cosovereign a,
body.mbp-clans .mbp-col-ambassador a,
body.mbp-clans .mbp-col-proxy a{
    text-decoration:none;
}

body.mbp-clans .mbp-role-name{
    display:inline;
}

body.mbp-clans .mbp-role-suffix{
    display:inline;
    margin-left:4px;
    color:rgba(255,255,255,.70);
}

body.mbp-clans .mbp-col-sovereign .mbp-role-name{
    color:#d2ac49;
    font-weight:600;
}

body.mbp-clans .mbp-col-cosovereign .mbp-role-name{
    color:#7eeaf0;
    font-weight:600;
}

body.mbp-clans .mbp-col-ambassador .mbp-role-name{
    color:#f0cb67;
    font-weight:600;
}

body.mbp-clans .mbp-col-proxy .mbp-role-name{
    color:#f2d28a;
    font-weight:600;
}

/* members */
body.mbp-clans .mbp-clans-members{
    display:inline-block;
    min-width:18px;
    font-weight:700;
    color:#d6a12a;
}

/* view button */
body.mbp-clans .mbp-col-view{
    padding-left:10px;
    padding-right:10px;
}

body.mbp-clans .mbp-col-view .btn.btn-sm{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:78px;
    min-width:78px;
    max-width:78px;
    height:32px;
    padding:0 10px;
    font-size:12px;
    line-height:1;
    white-space:nowrap;
    box-sizing:border-box;
}

/* ---------------------------------------------------------
   RESULTS / PAGINATION
--------------------------------------------------------- */

body.mbp-clans .mbp-clans-resultsline{
    margin-top:22px;
    margin-bottom:18px;
    text-align:center;
    font-size:14px;
    line-height:1.4;
    color:rgba(255,255,255,.82);
}

body.mbp-clans .mbp-clans-pager{
    margin-top:10px;
    margin-bottom:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    padding:10px 14px;
    border-radius:16px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(155,123,255,.16);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
    width:fit-content;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
}

body.mbp-clans .mbp-pager-btn,
body.mbp-clans .mbp-pager-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    height:32px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
    color:var(--text);
    text-decoration:none;
    font-size:12px;
    line-height:1;
    white-space:nowrap;
}

body.mbp-clans .mbp-pager-num.is-current{
    pointer-events:none;
    background:rgba(155,123,255,.18);
    border-color:rgba(155,123,255,.42);
    color:#fff;
    box-shadow:0 0 0 1px rgba(155,123,255,.10), 0 0 18px rgba(155,123,255,.10);
}

body.mbp-clans .mbp-pager-btn.is-disabled{
    opacity:.45;
    pointer-events:none;
    filter:saturate(.7);
}

body.mbp-clans .mbp-clans-empty{
    text-align:center;
    padding:14px 0 8px;
}

/* ---------------------------------------------------------
   GENERAL SAFETY
--------------------------------------------------------- */

body.mbp-clans .panel{
    overflow:hidden;
}

body.mbp-clans .panel .inner{
    position:relative;
    z-index:1;
}

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

@media (max-width: 980px){
    body.mbp-clans .mbp-clans-filters-row{
        flex-wrap:wrap;
    }

    body.mbp-clans .mbp-clans-filterblock-left{
        flex:1 1 100%;
        max-width:100%;
    }

    body.mbp-clans .mbp-clans-filterblock-right{
        flex:1 1 100%;
        justify-content:flex-start;
    }

    body.mbp-clans .mbp-clans-table{
        min-width:1080px;
    }

    body.mbp-clans .mbp-clans-table thead th{
        font-size:10px;
    }

    body.mbp-clans .mbp-clans-table tbody td{
        font-size:13px;
    }

    body.mbp-clans .mbp-clans-name-text{
        font-size:14px;
    }

    body.mbp-clans .mbp-clans-resultsline{
        font-size:13px;
    }

    body.mbp-clans .mbp-clans-pager{
        width:100%;
        padding:10px;
    }
}