/* ==========================================================================
   TEAMLEADS INDEX — Modern Dashboard UI (Responsive + Clean on small screens)
   File: resources/css/admin/teamleads-index.css
   ========================================================================== */

:root{
    --tl-card: #ffffff;
    --tl-text: #0f172a;
    --tl-muted: #64748b;
    --tl-border: rgba(148,163,184,.26);

    --tl-shadow: 0 18px 55px rgba(2, 6, 23, .10);
    --tl-shadow2: 0 10px 26px rgba(15, 23, 42, 0.08);

    --tl-radius: 16px;
    --tl-radius-sm: 12px;

    --tl-gap: 12px;
}

/* Page wrap (FULL WIDTH, but safe paddings) */
.tl-wrap{
    max-width: none;
    width: 100%;
    padding: 0 16px;
    margin: 0 auto;
}

@media (min-width: 1200px){
    .tl-wrap{ padding: 0 18px; }
}
@media (min-width: 1600px){
    .tl-wrap{ padding: 0 24px; }
}

/* ========================================================================== */
/* HERO TOP */
/* ========================================================================== */

.tl-hero{
    position: relative;
    border-radius: var(--tl-radius);
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.22);

    background:
        radial-gradient(900px 420px at 10% 10%, rgba(59,130,246,.18), transparent 55%),
        radial-gradient(900px 420px at 85% 0%, rgba(168,85,247,.14), transparent 55%),
        radial-gradient(900px 420px at 60% 120%, rgba(16,185,129,.10), transparent 55%),
        linear-gradient(135deg, #ffffff 0%, #f8fafc 55%, #eef2ff 100%);

    box-shadow: var(--tl-shadow2);
    padding: 16px;
}

/* Живі світлові плями */
.tl-hero::before{
    content:"";
    position:absolute;
    inset:-60px;
    background:
        radial-gradient(600px 220px at 10% 10%, rgba(59,130,246,.22), transparent 60%),
        radial-gradient(520px 220px at 80% 0%, rgba(168,85,247,.18), transparent 60%),
        radial-gradient(520px 240px at 70% 110%, rgba(16,185,129,.14), transparent 60%);
    filter: blur(6px);
    opacity: .65;
    animation: tlFloat 10s ease-in-out infinite;
    pointer-events:none;
}

@keyframes tlFloat{
    0%   { transform: translate3d(0,0,0) scale(1); }
    50%  { transform: translate3d(-10px, 8px, 0) scale(1.03); }
    100% { transform: translate3d(0,0,0) scale(1); }
}

.tl-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(15,23,42,.06) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(0deg, rgba(15,23,42,.05) 1px, transparent 1px) 0 0 / 28px 28px;
    opacity:.18;
    pointer-events:none;
}

.tl-hero-inner{
    position: relative;
    display:flex;
    justify-content: space-between;
    gap: 16px;
    z-index: 1;
    align-items: flex-start;
}

.tl-hero-left{ min-width: 0; flex: 1 1 auto; }

.tl-hero-kicker{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #64748b;
    margin-bottom: 6px;
}

.tl-hero-title{
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.02em;
    color: #0f172a;
    margin-bottom: 6px;
}

.tl-hero-text{
    font-size: 13px;
    color: #475569;
    margin-bottom: 12px;
    max-width: 980px;
}

.tl-hero-right{
    flex: 0 0 360px;
    max-width: 420px;
    display:flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.tl-chip{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,.26);
    background: rgba(255,255,255,.75);
    color: #0f172a;
    font-size: 12px;
    backdrop-filter: blur(8px);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Month box */
.tl-month-box{
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,.24);
    background: rgba(255,255,255,.85);
    padding: 10px;
    backdrop-filter: blur(8px);
}

.tl-month-box-label{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #64748b;
    margin-bottom: 6px;
}

.tl-month-row{
    display:flex;
    gap: 8px;
    align-items:center;
}

.tl-month-input{
    height: 34px;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.28);
    background: #fff;
    color: #0f172a;
    width: 100%;
}

.tl-month-input:focus{
    outline: none;
    box-shadow: 0 0 0 3px rgba(59,130,246,.20);
    border-color: rgba(59,130,246,.45);
}

.tl-month-submit{
    height: 34px;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 12px;
    white-space: nowrap;
}

.tl-month-pills{
    margin-top: 8px;
    display:flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tl-pill{
    flex: 1 1 0;
    min-width: 140px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,.28);
    background: #ffffff;
    color: #0f172a;
    font-size: 12px;
    text-decoration:none;
    white-space: nowrap;
}

.tl-pill:hover{
    text-decoration:none;
    background: #f1f5f9;
    color: #0f172a;
}

.tl-pill--active{
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}

/* ========================================================================== */
/* KPI GRID */
/* ========================================================================== */

.tl-kpi-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--tl-gap);
    margin-top: 12px;
}

.tl-kpi{
    border-radius: var(--tl-radius-sm);
    border: 1px solid rgba(148,163,184,.22);
    background: rgba(255,255,255,.72);
    padding: 12px;
    display:block;
    backdrop-filter: blur(10px);
    min-width: 0;
}

/* Старый блок-иконка (на всякий) */
.tl-kpi-ic{ display:none !important; }

.tl-kpi-mini-ic{
    font-size: 12px;
    opacity: .75;
    margin-right: 8px;
    vertical-align: -1px;
}

.tl-kpi-body{ min-width: 0; }

.tl-kpi-label{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #64748b;
    margin-bottom: 4px;
    display:flex;
    align-items:center;
    min-width: 0;
}

.tl-kpi-value{
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.02em;
    color: #0f172a;
    line-height: 1.1;
}

.tl-kpi-suffix{
    font-size: 12px;
    font-weight: 800;
    color: #64748b;
    margin-left: 6px;
}

.tl-kpi-sub{
    margin-top: 4px;
    font-size: 11px;
    color: #64748b;
}

/* ========================================================================== */
/* SECTION TITLE */
/* ========================================================================== */

.tl-section-title{
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #334155;
    margin: 14px 0 10px;
}

/* ========================================================================== */
/* PODIUM (Top-3) — adaptive grid (no chaos) */
/* ========================================================================== */

.tl-podium{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
}

.tl-podium-card{
    grid-column: span 4;
    border-radius: 14px;
    background: var(--tl-card);
    border: 1px solid var(--tl-border);
    box-shadow: var(--tl-shadow2);
    padding: 10px;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.tl-podium-card::before{
    content:"";
    position:absolute;
    inset:-2px;
    opacity:.52;
    pointer-events:none;
    background:
        radial-gradient(700px 220px at 10% 0%, rgba(59,130,246,.14), transparent 60%),
        radial-gradient(700px 220px at 90% 0%, rgba(168,85,247,.10), transparent 60%);
}

.tl-podium-top{
    position: relative;
    display:flex;
    justify-content: space-between;
    align-items:flex-start;
    gap: 10px;
    z-index: 1;
    margin-bottom: 8px;
}

.tl-rank-badge{
    display:inline-flex;
    align-items:center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(148,163,184,.35);
    background: rgba(248,250,252,.96);
    color: #0f172a;
    white-space: nowrap;
}

.tl-rank-badge--gold{ border-color: rgba(250,204,21,.70); box-shadow: 0 10px 22px rgba(234,179,8,.16); }
.tl-rank-badge--silver{ border-color: rgba(148,163,184,.75); box-shadow: 0 10px 22px rgba(148,163,184,.12); }
.tl-rank-badge--bronze{ border-color: rgba(251,146,60,.75); box-shadow: 0 10px 22px rgba(251,146,60,.12); }

.tl-podium-user{
    position: relative;
    z-index: 1;
    display:flex;
    align-items:center;
    gap: 10px;
    min-width: 0;
}

.tl-avatar{
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: linear-gradient(135deg, #111827 0%, #334155 100%);
    color: #fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 900;
    letter-spacing: .02em;
    flex: 0 0 auto;
    font-size: 14px;
}

.tl-user-lines{
    display:flex;
    flex-direction: column;
    min-width: 0;
}

.tl-user-name{
    font-weight: 900;
    color: #0f172a;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-user-email{
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-podium-metrics{
    position: relative;
    z-index: 1;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.tl-metric{
    border-radius: 11px;
    border: 1px solid rgba(148,163,184,.22);
    background: rgba(248,250,252,.78);
    padding: 8px;
    min-width: 0;
}

.tl-metric-label{
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: #64748b;
    margin-bottom: 3px;
}

.tl-metric-value{
    font-weight: 900;
    color: #0f172a;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================================================== */
/* LIST TOOLBAR + TABLE */
/* ========================================================================== */

.tl-card{
    border-radius: var(--tl-radius);
    border: 1px solid var(--tl-border);
    background: var(--tl-card);
    box-shadow: var(--tl-shadow2);
    overflow: hidden; /* важно, чтобы sticky header красиво */
}

.tl-toolbar{
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(148,163,184,.20);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 60%, #eef2ff 100%);
    flex-wrap: wrap; /* <= главное, чтобы не ломалось */
}

.tl-toolbar-title{
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
}

.tl-toolbar-hint{
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}

.tl-sort{
    display:flex;
    align-items:center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 280px;
    max-width: 520px;
    width: 100%;
    justify-content: flex-end;
}

.tl-sort-label{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #64748b;
    font-weight: 900;
    white-space: nowrap;
}

.tl-sort-select{
    width: 100%;
    min-width: 220px;
    max-width: 360px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.28);
    background: rgba(255,255,255,.85);
}

.tl-table-wrap{
    max-height: 72vh;
    overflow: auto;              /* horizontal + vertical */
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid rgba(148,163,184,.12);
}

.tl-table{
    min-width: 1060px;          /* адекватная база */
    margin: 0;
}

.tl-table thead th{
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fafc;
    border-bottom: 1px solid rgba(148,163,184,.25);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #64748b;
    white-space: nowrap;
}

.tl-table tbody td{ vertical-align: middle; }

/* name cell */
.tl-name{
    display:flex;
    gap: 10px;
    align-items:center;
    min-width: 0;
}

.tl-avatar-sm{
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 14px;
}

.tl-name-main{
    display:flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tl-name-row{
    display:flex;
    align-items:center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.tl-chip-rank{
    display:inline-flex;
    align-items:center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    border: 1px solid rgba(148,163,184,.35);
    background: #fff;
    color: #0f172a;
    white-space: nowrap;
}

.tl-subline{
    font-size: 11px;
    color: #64748b;
    line-height: 1.25;
}

/* email cell */
.tl-email{
    display:flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tl-email-text{
    font-size: 13px;
    color: #0f172a;
    word-break: break-word; /* чтобы не рвало колонку */
}

.tl-btn-xs{
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 10px !important;
    width: fit-content;
}

/* cabinets */
.tl-cabs{
    display:flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tl-cabs .badge{
    font-size: 11px;
    padding: 6px 8px;
    border-radius: 999px;
}

/* score */
.tl-score{
    display:flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tl-score-top{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.tl-score-badge{
    display:inline-flex;
    align-items:center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    border: 1px solid transparent;
    white-space: nowrap;
}

.tl-b-good{ background:#dcfce7; color:#166534; border-color:#22c55e; }
.tl-b-mid { background:#fef3c7; color:#92400e; border-color:#f59e0b; }
.tl-b-bad { background:#fee2e2; color:#b91c1c; border-color:#ef4444; }
.tl-b-empty{ background:#f3f4f6; color:#4b5563; border-color:#d1d5db; }

.tl-score-foot{
    font-size: 11px;
    color: #64748b;
}

/* Progress */
.tl-progress{
    height: 10px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.22);
    position: relative;
}

.tl-progress::after{
    content:"";
    position:absolute;
    top: -2px;
    bottom: -2px;
    left: 60%;
    border-left: 2px dashed rgba(148,163,184,.55);
    opacity: .9;
}

.tl-progress > span{
    display:block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    transition: width .25s ease;
}

.tl-progress--good > span{ background: linear-gradient(90deg, #22c55e, #16a34a); }
.tl-progress--mid  > span{ background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.tl-progress--bad  > span{ background: linear-gradient(90deg, #ef4444, #f97316); }
.tl-progress--empty> span{ background: linear-gradient(90deg, #cbd5e1, #e2e8f0); }

.tl-action-col .btn{ border-radius: 12px; }

/* ========================================================================== */
/* MOBILE CARDS */
/* ========================================================================== */

.tl-mobile{ display:none; }

.tl-mcard{
    border-radius: var(--tl-radius);
    border: 1px solid rgba(148,163,184,.25);
    background:
        radial-gradient(900px 260px at 0% 0%, rgba(59,130,246,.10), transparent 55%),
        radial-gradient(900px 260px at 100% 0%, rgba(168,85,247,.09), transparent 55%),
        #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    padding: 12px;
}

.tl-mcard + .tl-mcard{ margin-top: 10px; }

.tl-mhead{
    display:flex;
    justify-content: space-between;
    gap: 10px;
    align-items:flex-start;
    margin-bottom: 10px;
}

.tl-muser{
    display:flex;
    gap: 10px;
    align-items:flex-start;
    min-width: 0;
}

.tl-mname{
    font-size: 14px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
}

.tl-memail{
    font-size: 11px;
    color: #64748b;
    word-break: break-word;
}

.tl-mmeta{
    margin-top: 4px;
    display:flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    color: #64748b;
}

.tl-mbody{
    border-top: 1px dashed rgba(148,163,184,.35);
    padding-top: 10px;
    display:flex;
    flex-direction: column;
    gap: 10px;
}

.tl-mrow{
    display:flex;
    gap: 10px;
    align-items:flex-start;
}

.tl-mlabel{
    min-width: 84px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #64748b;
    font-weight: 900;
    white-space: nowrap;
}

.tl-mvalue{
    flex: 1;
    min-width: 0;
}

.tl-mfooter{ margin-top: 10px; }

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

/* <= 1200px: “малый монитор/ноут” — ключевой фикс от “каши” */
@media (max-width: 1199.98px){
    .tl-hero-inner{
        align-items: stretch;
    }
    .tl-hero-right{
        flex: 0 0 340px;
        max-width: 380px;
    }
    .tl-hero-title{ font-size: 22px; }

    .tl-kpi-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Top-3 превращаем в 2 колонки */
    .tl-podium-card{ grid-column: span 6; }
    .tl-podium-metrics{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Тулбар не ломается */
    .tl-sort{
        justify-content: flex-start;
        max-width: none;
    }

    /* Таблица: чуть меньше базовая ширина, чтобы меньше скроллить */
    .tl-table{ min-width: 980px; }
}

/* <= 992px: планшеты/узкие ноуты */
@media (max-width: 991.98px){
    .tl-hero-inner{
        flex-direction: column;
        align-items: stretch;
    }
    .tl-hero-right{
        flex: 0 0 auto;
        max-width: none;
        align-items: stretch;
    }
    .tl-chip{ width: 100%; justify-content: center; }

    .tl-kpi-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Top-3 в 1 колонку (чтобы красиво и без сжатия) */
    .tl-podium-card{ grid-column: span 12; }

    /* Тулбар — в столбик */
    .tl-sort{
        min-width: 0;
        width: 100%;
        justify-content: space-between;
    }
    .tl-sort-select{
        max-width: none;
    }

    .tl-table-wrap{ max-height: none; }
    .tl-table{ min-width: 940px; }
}

/* <= 768px: мобильный — включаем карточки */
@media (max-width: 767.98px){
    .tl-wrap{ padding: 0 12px; }

    .tl-kpi-grid{ grid-template-columns: 1fr; }

    .tl-desktop{ display:none; }
    .tl-mobile{ display:block; }
}