/* Enhanced Attachments Panel - Clean File Links v2.0 */

/* Remove grid, use simple list */
.tk-panel-attachments .tk-list-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 5px 0 10px 0 !important;
}

.tk-panel-attachments .tk-list-items > a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 10px 15px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    color: #374151 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    line-height: 1.4 !important;
    min-height: auto !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transform: none !important;
}

.tk-panel-attachments .tk-list-items > a:hover {
    background: #f3f4f6 !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    color: #028be5 !important;
}

/* File icon - simple and clean */
.tk-panel-attachments .tk-list-items > a:before {
    content: "\e902" !important;
    font-family: "Thikaa Icons" !important;
    font-size: 16px !important;
    margin-right: 12px !important;
    color: #9ca3af !important;
    flex-shrink: 0 !important;
    width: 20px !important;
    text-align: center !important;
}

.tk-panel-attachments .tk-list-items > a:hover:before {
    color: #028be5 !important;
}

/* Hide the old tk-icon element if present */
.tk-panel-attachments .tk-list-items > a .tk-icon {
    display: none !important;
}

/* Image files - use image icon */
.tk-panel-attachments .tk-list-items > a[href*=".jpg"]:before,
.tk-panel-attachments .tk-list-items > a[href*=".jpeg"]:before,
.tk-panel-attachments .tk-list-items > a[href*=".png"]:before,
.tk-panel-attachments .tk-list-items > a[href*=".gif"]:before,
.tk-panel-attachments .tk-list-items > a[href*=".svg"]:before,
.tk-panel-attachments .tk-list-items > a[href*=".webp"]:before {
    content: "\e91c" !important;
    color: #10b981 !important;
}

.tk-panel-attachments .tk-list-items > a[href*=".jpg"]:hover:before,
.tk-panel-attachments .tk-list-items > a[href*=".jpeg"]:hover:before,
.tk-panel-attachments .tk-list-items > a[href*=".png"]:hover:before,
.tk-panel-attachments .tk-list-items > a[href*=".gif"]:hover:before,
.tk-panel-attachments .tk-list-items > a[href*=".svg"]:hover:before,
.tk-panel-attachments .tk-list-items > a[href*=".webp"]:hover:before {
    color: #028be5 !important;
}

/* PDF files */
.tk-panel-attachments .tk-list-items > a[href*=".pdf"]:before {
    content: "\e902" !important;
    color: #ef4444 !important;
}

/* Document files */
.tk-panel-attachments .tk-list-items > a[href*=".doc"]:before,
.tk-panel-attachments .tk-list-items > a[href*=".docx"]:before {
    content: "\e902" !important;
    color: #3b82f6 !important;
}

/* Spreadsheet files */
.tk-panel-attachments .tk-list-items > a[href*=".xls"]:before,
.tk-panel-attachments .tk-list-items > a[href*=".xlsx"]:before,
.tk-panel-attachments .tk-list-items > a[href*=".csv"]:before {
    content: "\e902" !important;
    color: #10b981 !important;
}

/* Archive files */
.tk-panel-attachments .tk-list-items > a[href*=".zip"]:before,
.tk-panel-attachments .tk-list-items > a[href*=".rar"]:before,
.tk-panel-attachments .tk-list-items > a[href*=".7z"]:before {
    content: "\e902" !important;
    color: #f59e0b !important;
}

/* Video files */
.tk-panel-attachments .tk-list-items > a[href*=".mp4"]:before,
.tk-panel-attachments .tk-list-items > a[href*=".avi"]:before,
.tk-panel-attachments .tk-list-items > a[href*=".mov"]:before,
.tk-panel-attachments .tk-list-items > a[href*=".webm"]:before {
    content: "\e91b" !important;
    color: #8b5cf6 !important;
}

/* Audio files */
.tk-panel-attachments .tk-list-items > a[href*=".mp3"]:before,
.tk-panel-attachments .tk-list-items > a[href*=".wav"]:before,
.tk-panel-attachments .tk-list-items > a[href*=".ogg"]:before {
    content: "\e903" !important;
    color: #06b6d4 !important;
}

/* Attachments section header */
.tk-panel-attachments h3 {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 15px 8px 15px !important;
    margin: 0 !important;
    background: transparent !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* ========== Image Thumbnail Grid ========== */
.tk-att-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 8px 12px;
}
.tk-att-thumb {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1;
    background: #f3f4f6;
}
.tk-att-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tk-att-thumb:hover img {
    opacity: 0.8;
}
.tk-att-thumb-name {
    display: none;
}

/* ========== Location Items ========== */
.tk-att-location span {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.tk-att-location small {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 400;
}

/* ========== Location & Voice: show .tk-icon, hide :before pseudo ========== */
.tk-panel-attachments .tk-list-items > a.tk-att-location .tk-icon,
.tk-panel-attachments .tk-list-items > a.tk-att-voice .tk-icon {
    display: inline-block !important;
}
.tk-panel-attachments .tk-list-items > a.tk-att-location .tk-icon:before {
    content: "\68";
    color: #e74c3c;
}
.tk-panel-attachments .tk-list-items > a.tk-att-voice .tk-icon:before {
    content: "\e903";
    color: #06b6d4;
}
.tk-panel-attachments .tk-list-items > a.tk-att-location:before,
.tk-panel-attachments .tk-list-items > a.tk-att-voice:before {
    display: none !important;
}