/* ====================================================
   KLIENTŲ SĄRAŠO STILIUS V5 (Premium Avatars + Pakvietimai)
   ==================================================== */

.tf-klientai-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.tf-klientai-header h3 { margin: 0 0 5px 0; font-size: 24px; font-weight: 800; color: var(--tf-text-heading); letter-spacing: -0.5px; }
.tf-klientai-header p { margin: 0; color: var(--tf-text-muted); font-size: 14px; }

/* Paieška */
.tf-search-wrap { margin-bottom: 20px; position: relative; max-width: 500px; }
.tf-search-wrap input { width: 100%; padding: 14px 15px 14px 45px; border: 1px solid var(--tf-border); border-radius: 12px; font-size: 14px; font-family: inherit; color: var(--tf-text-main); background: var(--tf-bg-card); box-shadow: 0 2px 6px rgba(0,0,0,0.02); transition: all 0.3s; outline: none; box-sizing: border-box; }
.tf-search-wrap input:focus { border-color: var(--tf-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.tf-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--tf-text-muted); display: flex; align-items: center; justify-content: center; pointer-events: none; }

/* Pranešimai (Sėkmė / Klaida) */
.tf-success-msg { background: rgba(16, 185, 129, 0.1); color: #059669; border: 1px solid rgba(16, 185, 129, 0.2); padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.tf-error-msg { background: rgba(239, 68, 68, 0.1); color: #dc2626; border: 1px solid rgba(239, 68, 68, 0.2); padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }

/* ================== KORTELIŲ SĄRAŠAS ================== */
.tf-klientai-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; }

.tf-klientas-card { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    background: var(--tf-bg-card); 
    border: 1px solid var(--tf-border); 
    border-radius: 12px; 
    padding: 12px 20px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.01); 
    transition: all 0.2s ease; 
    cursor: pointer; 
    gap: 20px; 
}
/* Patobulintas Hover efektas */
.tf-klientas-card:hover { 
    border-color: var(--tf-primary); 
    transform: translateX(4px); 
    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.06); 
    background: var(--tf-bg-box); /* Kortelė vos pašviesėja */
}

/* 1. Kairė pusė (Avataras + Pavadinimas) */
.tf-klientas-main { display: flex; align-items: center; gap: 15px; flex: 1; min-width: 250px; }

/* Avatarų stilius */
.tf-avatar-circle { 
    width: 42px; 
    height: 42px; 
    border-radius: 50%; 
    position: relative; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
    color: white; 
    font-weight: 800; 
    font-size: 16px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); /* Suteikia gylio */
}
.tf-avatar-img { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    object-fit: cover; 
    z-index: 2; /* Uždengia raidę, jei paveiksliukas užsikrauna */
}

.tf-klientas-info { display: flex; flex-direction: column; gap: 2px; }
.tf-klientas-title { 
    color: var(--tf-text-heading); 
    font-size: 15px; 
    font-weight: 800; 
    text-decoration: none !important; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.tf-klientas-card:hover .tf-klientas-title { color: var(--tf-primary); }

.tf-klientas-kodas { 
    font-size: 12px; 
    color: var(--tf-text-muted); 
    opacity: 0.6; /* Prislopiname kodą, kad netrukdytų akiai */
    font-family: monospace; 
}

/* 2. Vidurys (Kontaktai) */
.tf-klientas-contacts { display: flex; align-items: center; justify-content: flex-end; gap: 15px; flex: 1.5; font-size: 13px; color: var(--tf-text-main); font-weight: 500; }
.tf-contact-item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tf-contact-item svg { color: var(--tf-text-muted); opacity: 0.6; flex-shrink: 0; }
.tf-contact-item a { color: var(--tf-text-main); text-decoration: none !important; transition: 0.2s; }
.tf-contact-item a:hover { color: var(--tf-primary); }
.tf-contact-item .empty { color: var(--tf-text-muted); font-style: italic; opacity: 0.4; }

/* Taškelis tarp el. pašto ir telefono */
.tf-contact-dot { width: 4px; height: 4px; background: var(--tf-border); border-radius: 50%; opacity: 0.8; }

/* 3. Dešinė pusė (Veiksmai: Pakvietimai + Atidaryti Profilį) */
.tf-klientas-action { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }

/* --- Pakvietimų Mygtukai (Nauja) --- */
.tf-btn-invite {
    background: rgba(37, 99, 235, 0.08); color: var(--tf-primary); border: 1px solid rgba(37, 99, 235, 0.2);
    padding: 7px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer;
    transition: 0.2s; display: inline-flex; align-items: center; gap: 5px; font-family: inherit;
}
.tf-btn-invite:hover { background: var(--tf-primary); color: white; border-color: var(--tf-primary); transform: translateY(-1px); box-shadow: 0 4px 6px rgba(37,99,235,0.15); }

.tf-no-user-badge {
    background: #fef2f2; color: #ef4444; border: 1px dashed #fca5a5; padding: 7px 12px;
    border-radius: 8px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; cursor: help;
    opacity: 0.8; transition: 0.2s;
}
.tf-klientas-card:hover .tf-no-user-badge { opacity: 1; border-style: solid; }

/* Profilio atidarymo mygtukas */
.tf-btn-view { 
    background: transparent; 
    color: var(--tf-text-muted) !important; 
    padding: 8px 16px; 
    border-radius: 8px; 
    font-size: 13px; 
    font-weight: 700; 
    text-decoration: none !important; 
    border: 1px solid var(--tf-border); 
    transition: all 0.3s; 
    white-space: nowrap;
}
.tf-klientas-card:hover .tf-btn-view { 
    background: var(--tf-primary); 
    color: white !important; 
    border-color: var(--tf-primary); 
    box-shadow: 0 4px 10px rgba(37,99,235,0.2);
}

/* Puslapiavimas */
.tf-pagination { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding-top: 15px; border-top: 1px solid var(--tf-border); }
.tf-page-btn { padding: 6px 12px; border: 1px solid var(--tf-border); background: var(--tf-bg-card); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--tf-text-muted); transition: all 0.2s; }
.tf-page-btn:hover { background: var(--tf-bg-box); color: var(--tf-text-heading); }
.tf-page-btn.active { background: var(--tf-primary); color: #fff; border-color: var(--tf-primary); box-shadow: 0 4px 10px rgba(37,99,235,0.2); }
.tf-page-info { font-size: 13px; font-weight: 600; color: var(--tf-text-muted); margin-right: auto; }

.tf-empty-state { padding: 40px; background: var(--tf-bg-card); border: 2px dashed var(--tf-border); border-radius: 16px; text-align: center; color: var(--tf-text-muted); font-size: 15px; font-weight: 600; margin-top: 20px; }

/* Responsive pritaikymas */
@media (max-width: 1024px) {
    .tf-klientas-card { flex-wrap: wrap; }
    .tf-klientas-contacts { flex-basis: 100%; justify-content: flex-start; order: 3; margin-top: 5px; padding-left: 57px; }
    .tf-klientas-action { order: 2; margin-left: auto; }
}
@media (max-width: 600px) {
    .tf-klientas-contacts { flex-direction: column; align-items: flex-start; gap: 6px; }
    .tf-contact-dot { display: none; }
    .tf-klientas-action { flex-direction: column; align-items: flex-end; }
    .tf-btn-view, .tf-btn-invite, .tf-no-user-badge { width: 100%; text-align: center; justify-content: center; }
}