/* =========================================================
   RAZ CLOUD — SOURCE SERVICES V1
   Adapted from ISP-Mikrotik-Billing source UI language
   Sidebar geometry intentionally untouched
   ========================================================= */

.ss-main{
    padding-top:20px;
    padding-bottom:50px;
}


/* =========================================================
   HEADER
   ========================================================= */

.ss-page-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
}

.ss-kicker{
    display:block;
    margin-bottom:5px;
    color:var(--raz-primary,#2c7be5);
    font-size:8px;
    font-weight:800;
    letter-spacing:1.35px;
}

.ss-page-head h1{
    margin:0;
    color:var(--text);
    font-size:24px;
    line-height:1.2;
}

.ss-page-head p{
    margin:5px 0 0;
    color:var(--muted);
    font-size:9px;
}

.ss-head-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.ss-search{
    width:270px;
    height:36px;

    display:flex;
    align-items:center;
    gap:8px;

    padding:0 11px;

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

    background:var(--surface);
}

.ss-search span{
    color:var(--muted);
}

.ss-search input{
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:var(--text);
    font:inherit;
    font-size:8px;
}


/* =========================================================
   ROUTER TOOLBAR
   Source: router selector + refresh
   ========================================================= */

.ss-router-toolbar{
    min-height:64px;

    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:14px;
    padding:10px 13px;

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

    background:var(--surface);
}

.ss-router-select{
    display:flex;
    align-items:center;
    gap:10px;
}

.ss-router-icon{
    width:34px;
    height:34px;

    display:grid;
    place-items:center;

    border-radius:8px;

    background:rgba(44,123,229,.12);
    color:var(--raz-primary,#2c7be5);

    font-size:12px;
    font-weight:800;
}

.ss-router-select label{
    display:block;
    margin-bottom:3px;

    color:var(--muted);

    font-size:7px;
    font-weight:700;
}

.ss-router-select select{
    min-width:175px;
    height:30px;

    padding:0 28px 0 9px;

    border:1px solid var(--border);
    border-radius:6px;

    background:var(--surface-2,var(--surface));
    color:var(--text);

    font:inherit;
    font-size:8px;
}

.ss-router-state{
    display:flex;
    align-items:center;
    gap:8px;

    margin-left:5px;
    padding-left:14px;

    border-left:1px solid var(--border);
}

.ss-router-state strong{
    display:block;
    color:var(--text);
    font-size:8px;
}

.ss-router-state small{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:7px;
}

.ss-state-dot{
    width:8px;
    height:8px;
    border-radius:50%;
}

.ss-state-dot.pending{
    background:#f5803e;
    box-shadow:0 0 0 4px rgba(245,128,62,.08);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.ss-btn{
    height:31px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 11px;

    border-radius:6px;

    text-decoration:none;

    font:inherit;
    font-size:8px;
    font-weight:700;

    cursor:pointer;

    transition:.17s ease;
}

.ss-btn.outline{
    margin-left:auto;

    border:1px solid var(--border);

    background:transparent;
    color:var(--muted);
}

.ss-btn.outline:hover{
    background:rgba(127,143,164,.06);
    color:var(--text);
}

.ss-btn.primary{
    border:1px solid var(--raz-primary,#2c7be5);

    background:var(--raz-primary,#2c7be5);
    color:#fff;
}


/* =========================================================
   SOURCE NAV TABS
   ========================================================= */

.ss-tabs{
    display:flex;
    align-items:flex-end;
    gap:2px;

    margin:0 0 14px;
    padding:0;

    overflow-x:auto;

    border-bottom:1px solid var(--border);

    scrollbar-width:none;
}

.ss-tabs::-webkit-scrollbar{
    display:none;
}

.ss-tab{
    min-height:35px;

    display:inline-flex;
    align-items:center;
    gap:6px;

    flex:0 0 auto;

    padding:0 12px;

    border:1px solid transparent;
    border-bottom:0;
    border-radius:7px 7px 0 0;

    background:transparent;
    color:var(--muted);

    font:inherit;
    font-size:8px;
    font-weight:650;

    cursor:pointer;
}

.ss-tab:hover{
    color:var(--text);
}

.ss-tab.active{
    margin-bottom:-1px;

    border-color:var(--border);

    background:var(--surface);
    color:var(--raz-primary,#2c7be5);

    font-weight:800;
}

.ss-tab-count{
    min-width:18px;
    height:17px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 5px;

    border-radius:999px;

    background:#00d27a;
    color:#071a12;

    font-size:7px;
    font-weight:800;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.ss-summary-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;

    margin-bottom:14px;
}

.ss-stat{
    min-height:83px;

    padding:13px;

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

    background:var(--surface);
}

.ss-stat-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.ss-stat-icon{
    width:27px;
    height:27px;

    display:grid;
    place-items:center;

    border-radius:7px;

    background:rgba(44,123,229,.08);
    color:var(--raz-primary,#2c7be5);

    font-size:9px;
    font-weight:800;
}

.ss-stat > span,
.ss-stat-head > span:not(.ss-stat-icon){
    color:var(--muted);
    font-size:7px;
    font-weight:650;
}

.ss-stat strong{
    display:block;
    margin-top:7px;

    color:var(--text);

    font-size:18px;
    line-height:1;
}

.ss-stat small{
    display:block;
    margin-top:5px;

    color:var(--muted);
    font-size:7px;
}


/* =========================================================
   CARD
   ========================================================= */

.ss-card{
    border:1px solid var(--border);
    border-radius:8px;

    background:var(--surface);

    overflow:hidden;
}

.ss-card-head{
    min-height:59px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    padding:11px 14px;

    border-bottom:1px solid var(--border);
}

.ss-card-head h2{
    margin:0;

    color:var(--text);

    font-size:11px;
}

.ss-card-head p{
    margin:3px 0 0;

    color:var(--muted);

    font-size:7px;
}

.ss-toolbar{
    display:flex;
    align-items:center;
    gap:8px;
}

.ss-filter-group{
    display:flex;
    align-items:center;
    gap:4px;
}

.ss-filter{
    height:27px;

    padding:0 9px;

    border:1px solid var(--border);
    border-radius:6px;

    background:transparent;
    color:var(--muted);

    font:inherit;
    font-size:7px;
    font-weight:650;

    cursor:pointer;
}

.ss-filter.active{
    border-color:rgba(44,123,229,.30);

    background:rgba(44,123,229,.08);
    color:var(--raz-primary,#2c7be5);
}


/* =========================================================
   TABLE — Source table-sm / table-hover
   ========================================================= */

.ss-table-wrap{
    width:100%;
    overflow:auto;
}

.ss-table{
    width:100%;

    border-collapse:collapse;

    font-size:8px;
}

.ss-table thead{
    background:rgba(127,143,164,.055);
}

.ss-table th{
    padding:9px 11px;

    border-bottom:1px solid var(--border);

    color:var(--muted);

    text-align:left;
    white-space:nowrap;

    font-size:7px;
    font-weight:750;

    text-transform:uppercase;
    letter-spacing:.3px;
}

.ss-table td{
    padding:10px 11px;

    border-bottom:1px solid rgba(127,143,164,.09);

    color:var(--text);

    vertical-align:middle;
}

.ss-table tbody tr{
    transition:background .15s ease;
}

.ss-table tbody tr:hover{
    background:rgba(127,143,164,.035);
}

.ss-table tbody tr:last-child td{
    border-bottom:0;
}

.ss-primary-text{
    display:block;

    color:var(--text);

    font-size:8px;
    font-weight:750;
}

.ss-secondary-text{
    display:block;

    margin-top:3px;

    color:var(--muted);

    font-size:7px;
}


/* =========================================================
   BADGES
   ========================================================= */

.ss-badge{
    min-height:20px;

    display:inline-flex;
    align-items:center;

    padding:0 7px;

    border-radius:999px;

    font-size:7px;
    font-weight:750;
    white-space:nowrap;
}

.ss-badge.good{
    background:rgba(0,210,122,.10);
    color:#00d27a;
}

.ss-badge.warn{
    background:rgba(245,128,62,.10);
    color:#f5803e;
}

.ss-badge.info{
    background:rgba(39,188,253,.10);
    color:#27bcfd;
}

.ss-badge.primary{
    background:rgba(44,123,229,.10);
    color:#2c7be5;
}

.ss-badge.muted{
    background:rgba(127,143,164,.09);
    color:var(--muted);
}


/* =========================================================
   ACTION
   ========================================================= */

.ss-action{
    min-height:26px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 8px;

    border:1px solid var(--border);
    border-radius:5px;

    background:transparent;
    color:var(--raz-primary,#2c7be5);

    text-decoration:none;

    font-size:7px;
    font-weight:700;
}

.ss-action:hover{
    background:rgba(44,123,229,.07);
}


/* =========================================================
   SOURCE SPLIT CARD
   Used for Profiles / Overview
   ========================================================= */

.ss-split{
    display:grid;
    grid-template-columns:minmax(260px,.42fr) minmax(0,1fr);
    gap:14px;

    padding:14px;
}

.ss-panel{
    border:1px solid var(--border);
    border-radius:7px;

    overflow:hidden;
}

.ss-panel-head{
    min-height:42px;

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

    padding:9px 11px;

    border-bottom:1px solid var(--border);

    background:rgba(127,143,164,.035);

    color:var(--text);

    font-size:8px;
    font-weight:750;
}

.ss-panel-body{
    padding:12px;
}

.ss-profile-list{
    display:grid;
    gap:7px;
}

.ss-profile-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    min-height:43px;

    padding:8px 10px;

    border:1px solid var(--border);
    border-radius:6px;

    background:rgba(127,143,164,.025);
}

.ss-profile-item strong{
    display:block;

    color:var(--text);

    font-size:8px;
}

.ss-profile-item small{
    display:block;

    margin-top:3px;

    color:var(--muted);

    font-size:7px;
}


/* =========================================================
   EDGE PLACEHOLDER
   ========================================================= */

.ss-edge-placeholder{
    min-height:235px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:30px;

    text-align:center;
}

.ss-edge-placeholder-inner{
    max-width:390px;
}

.ss-edge-placeholder-icon{
    width:50px;
    height:50px;

    display:grid;
    place-items:center;

    margin:0 auto 12px;

    border:1px solid rgba(245,128,62,.22);
    border-radius:50%;

    background:rgba(245,128,62,.06);
    color:#f5803e;

    font-size:15px;
}

.ss-edge-placeholder h3{
    margin:0;

    color:var(--text);

    font-size:12px;
}

.ss-edge-placeholder p{
    margin:7px 0 0;

    color:var(--muted);

    font-size:8px;
    line-height:1.65;
}


/* =========================================================
   EMPTY
   ========================================================= */

.ss-empty{
    min-height:170px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:25px;

    color:var(--muted);

    text-align:center;
    font-size:8px;
}


/* =========================================================
   TOAST
   ========================================================= */

.ss-toast{
    position:fixed;
    left:50%;
    bottom:25px;
    z-index:500;

    min-width:220px;

    padding:10px 13px;

    border:1px solid var(--border);
    border-radius:7px;

    background:#121e2d;
    color:#d8e2ec;

    text-align:center;

    font-size:8px;

    opacity:0;
    pointer-events:none;

    transform:translate(-50%,8px);

    transition:.18s ease;
}

.ss-toast.show{
    opacity:1;
    transform:translate(-50%,0);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1050px){

    .ss-summary-grid{
        grid-template-columns:1fr 1fr;
    }

    .ss-page-head{
        align-items:flex-start;
    }

    .ss-head-actions{
        flex-wrap:wrap;
        justify-content:flex-end;
    }

    .ss-search{
        width:230px;
    }

    .ss-split{
        grid-template-columns:1fr;
    }
}


@media(max-width:760px){

    .ss-main{
        padding-left:14px !important;
        padding-right:14px !important;
    }

    .ss-page-head{
        flex-direction:column;
    }

    .ss-head-actions{
        width:100%;
        justify-content:space-between;
    }

    .ss-search{
        flex:1;
        width:auto;
    }

    .ss-router-toolbar{
        align-items:stretch;
        flex-wrap:wrap;
    }

    .ss-router-select{
        width:100%;
    }

    .ss-router-select > div{
        flex:1;
    }

    .ss-router-select select{
        width:100%;
    }

    .ss-router-state{
        margin-left:0;
        padding-left:0;
        padding-right:10px;

        border-left:0;
    }

    .ss-btn.outline{
        margin-left:auto;
    }

    .ss-card-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .ss-filter-group{
        width:100%;
        overflow:auto;

        scrollbar-width:none;
    }
}


@media(max-width:520px){

    .ss-summary-grid{
        grid-template-columns:1fr 1fr;
    }

    .ss-stat{
        min-height:76px;
    }

    .ss-head-actions .user-menu{
        display:none;
    }

    .ss-router-toolbar .ss-btn{
        flex:1;
    }

    .ss-table{
        min-width:850px;
    }
}