/* General Styles */
.nav-link {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
    margin-bottom: 0.5rem;
}

.nav-link:hover {
    background-color: #4a5568; /* gray-700 */
}

.nav-link.active {
    background-color: #2563eb; /* blue-600 */
    font-weight: bold;
}

/* NEW: Search Result Card */
.result-card {
    background-color: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    border-left: 5px solid #3b82f6; /* blue-500 */
}

.result-card h3 {
    font-size: 1.25rem;
    font-weight: bold;
    color: #1f2937; /* gray-800 */
    margin-bottom: 0.5rem;
}

.result-card p {
    color: #4b5563; /* gray-600 */
    margin-bottom: 0.25rem;
}

.result-card strong {
    color: #374151; /* gray-700 */
}

.result-card strong {
    color: #374151; /* gray-700 */
}

/* NEW: Style for highlighted table row */
.highlight-row {
    background-color: #dbeafe; /* blue-100 */
}
/* ... existing code ... */
.result-card strong {
    color: #374151; /* gray-700 */
}

/* --- NEW: Detailed Search Result Card Styles --- */
.search-card-detailed {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    border: 1px solid #e5e7eb; /* gray-200 */
    overflow: hidden; /* Ensures the child elements conform to the border radius */
}

.search-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: #f9fafb; /* gray-50 */
    border-bottom: 1px solid #e5e7eb; /* gray-200 */
}

.search-card-header h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #111827; /* gray-900 */
}

.search-card-header .kromik-no {
    font-size: 0.875rem;
    font-weight: medium;
    color: #6b7280; /* gray-500 */
    background-color: #e5e7eb;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}

.search-card-body {
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 100px 1fr; /* Column for image and column for details */
    gap: 1.5rem;
}

.search-card-photo {
    width: 100px;
    height: 100px;
    border-radius: 0.5rem;
    object-fit: cover;
    border: 2px solid #f3f4f6; /* gray-100 */
}

.search-card-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.detail-item {
    color: #4b5563; /* gray-600 */
}

.detail-item .label {
    font-weight: bold;
    color: #374151; /* gray-700 */
    display: block;
    margin-bottom: 0.25rem;
}

/* --- NEW: Responsive Styles for Mobile --- */
@media (max-width: 768px) {
    .search-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1rem;
    }

    .search-card-header h3 {
        font-size: 1.25rem; /* Slightly smaller on mobile */
    }

    .search-card-body {
        grid-template-columns: 1fr; /* Stack image and details vertically */
        padding: 1rem;
        gap: 1rem;
    }

    .search-card-photo {
        width: 80px; /* Make photo a bit smaller */
        height: 80px;
    }

    .search-card-details-grid {
        grid-template-columns: 1fr; /* Single column for details on mobile */
        gap: 0.75rem;
    }

    .detail-item {
        font-size: 0.9rem; /* Adjust font size for readability */
    }
}