/* 
 * Dossier Card Styles
 * Used by: Daily Updates, Events, Groups, Likes, Travels, Notes tabs, and dossier view modal
 * Single source for dossier dark-context text/link colors
 */

:root {
    --dossier-dark-text: #f0f0f0;
    --dossier-dark-link: #7dd3fc;
    --dossier-dark-link-hover: #bae6fd;
}

/* Unified dossier card styles */
.dossier-card {
    position: relative;
    width: 280px;
    height: 240px;
    border-radius: 10px;
    overflow: hidden;
    margin: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.dossier-card:hover {
    transform: scale(1.03);
}

/* Image styles */
.dossier-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay for cards with images (shows on hover) */
.dossier-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.65);
    color: white;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    display: flex;
    align-items: flex-end;
    padding: 12px;
    pointer-events: none;
}

.dossier-card:hover .dossier-card-overlay {
    opacity: 1;
}

/* Text-only cards (always visible) */
.dossier-card-text-only {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    color: white;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Card text content – light text on dark overlay/background (same vars as all dossier dark contexts) */
.dossier-card-overlay .dossier-card-text,
.dossier-card-overlay .dossier-card-text *,
.dossier-card-text-only .dossier-card-text,
.dossier-card-text-only .dossier-card-text *,
.dossier-card-text .desc,
.dossier-card-text .desc * {
    color: var(--dossier-dark-text) !important;
}
.dossier-card-text .desc a,
.dossier-card-overlay .dossier-card-text a,
.dossier-card-text-only .dossier-card-text a {
    color: var(--dossier-dark-link) !important;
    text-decoration: underline;
}
.dossier-card-text .desc a:hover,
.dossier-card-overlay .dossier-card-text a:hover,
.dossier-card-text-only .dossier-card-text a:hover {
    color: var(--dossier-dark-link-hover) !important;
}

.dossier-card-text {
    font-size: 0.9rem;
    line-height: 1.4;
}

.dossier-card-text strong {
    font-weight: 600;
}

/* Description with text truncation */
.dossier-card-text .desc {
    margin-top: 8px;
    font-size: 0.85rem;
    opacity: 0.9;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* Edit button */
.dossier-card-edit {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    pointer-events: auto;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.dossier-card:hover .dossier-card-edit {
    opacity: 1;
}

/* Legacy card classes (for backwards compatibility) */
.like-card,
.note-card,
.travel-card,
.group-card {
    position: relative;
    width: 280px;
    height: 240px;
    border-radius: 10px;
    overflow: hidden;
    margin: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.like-card:hover,
.note-card:hover,
.travel-card:hover,
.group-card:hover {
    transform: scale(1.03);
}

.like-card-img,
.note-card-img,
.travel-card-img,
.group-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.like-card-overlay,
.note-card-overlay,
.travel-card-overlay,
.group-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.65);
    color: white;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    display: flex;
    align-items: flex-end;
    padding: 10px;
    pointer-events: none;
}

.like-card:hover .like-card-overlay,
.note-card:hover .note-card-overlay,
.travel-card:hover .travel-card-overlay,
.group-card:hover .group-card-overlay {
    opacity: 1;
}

.like-card-text .desc,
.note-card-text .desc,
.travel-card-text .desc,
.group-card-text .desc {
    margin-top: 8px;
    font-size: 0.85rem;
    opacity: 0.85;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.like-card-edit,
.note-card-edit,
.travel-card-edit,
.group-card-edit {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    pointer-events: auto;
}

/* General view modal – same dossier dark-context colors as cards (single approach) */
#generalViewModal.dossier-view-modal .modal-header,
#generalViewModal.dossier-view-modal .modal-header .modal-title,
#generalViewModal.dossier-view-modal .modal-body,
#generalViewModal.dossier-view-modal .modal-body *,
#generalViewModal.dossier-view-modal .modal-footer {
    color: var(--dossier-dark-text) !important;
}
#generalViewModal.dossier-view-modal #generalViewDescription a {
    color: var(--dossier-dark-link) !important;
    text-decoration: underline;
}
#generalViewModal.dossier-view-modal #generalViewDescription a:hover {
    color: var(--dossier-dark-link-hover) !important;
}
#generalViewModal.dossier-view-modal .general-view-thumb.active {
    border-color: var(--dossier-dark-text);
}