@charset "UTF-8";
/* Project Status Indicators - Common across all pages */
/*
===========================================
PROJECT STATUS INDICATORS
===========================================









<!-- These emojis need UTF-8 to display correctly -->
<span class="status-icon emoji-icon" data-tooltip="Completed">✅</span>
<span class="status-icon emoji-icon" data-tooltip="Archived">📦</span>
<span class="status-icon emoji-icon" data-tooltip="Ongoing">🔄</span>
<span class="status-icon emoji-icon" data-tooltip="Paused">⏸️</span>
Icon-only version:
- <svg class="status-icon text-green-500" data-tooltip="Your tooltip text">...</svg>

<svg class="status-icon w-5 h-5 text-green-500" data-tooltip="Project successfully completed" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>


<svg class="status-icon w-5 h-5 text-gray-500" data-tooltip="Project archived - no longer maintained" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
</svg>

<svg class="status-icon w-5 h-5 text-blue-500" data-tooltip="Project actively under development" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
</svg>

<svg class="status-icon w-5 h-5 text-yellow-600" data-tooltip="Project temporarily paused" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>



Emoji only version
<span class="status-icon emoji-icon" data-tooltip="Project completed">?</span>
<span class="status-icon emoji-icon" data-tooltip="Project archived">?</span>
<span class="status-icon emoji-icon" data-tooltip="Work in progress">?</span>
<span class="status-icon emoji-icon" data-tooltip="Temporarily paused">??</span>

Notes:
- The data-tooltip attribute becomes the hover text
- Works with Tailwind CSS classes
- No JavaScript required
*/

/* Base status badge styling */
.status-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* ... rest of your CSS ... */
}

/* Tooltip positioning and animation */
.status-badge:before {
    content: attr(data-tooltip);
    /* ... tooltip styles ... */
}

/* Status color variants */
.status-completed { 
    background-color: #dcfce7; 
    color: #15803d; 
}

/* 
   Add more variants as needed:
   - status-experimental (purple)
   - status-deprecated (red)
   - status-beta (orange)
*/

.status-archived { 
    background-color: #f3f4f6; 
    color: #4b5563; 
}

/* Icon-only minimal version */
.status-icon {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    /* ... rest of styles ... */
}

/*
===========================================
END PROJECT STATUS INDICATORS
===========================================
*/
.status-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: help;
    transition: all 0.2s ease;
}

.status-badge:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: #111827;
    color: white;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 50;
}

.status-badge:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #111827;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 50;
}

.status-badge:hover:before,
.status-badge:hover:after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-8px);
}

/* Status variants */
.status-completed { 
    background-color: #dcfce7; 
    color: #15803d; 
}

.status-archived { 
    background-color: #f3f4f6; 
    color: #4b5563; 
}

.status-ongoing { 
    background-color: #dbeafe; 
    color: #1d4ed8; 
}

.status-paused { 
    background-color: #fef3c7; 
    color: #d97706; 
}

/* Icon-only version */
.status-icon {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    cursor: help;
    transition: all 0.2s ease;
}

.status-icon:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: #111827;
    color: white;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 50;
}

.status-icon:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #111827;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 50;
}

.status-icon:hover:before,
.status-icon:hover:after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-8px);
}



.link-obvious {
    color: var(--medical-blue, #2563eb);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    text-decoration-color: var(--medical-blue, #2563eb);
    transition: color 0.15s ease-in-out, text-decoration-color 0.15s ease-in-out;
}

.link-obvious:hover {
    color: #1d4ed8;
    text-decoration-color: #1d4ed8;
}