/**
 * BRCA Care - Final Card Component Styles
 *
 * Design Decisions:
 * - Diagonal gradient background (white → light color → border color at 45°, 135deg)
 * - Status indicator in top-right: dot + text label + icon (vertically stacked, 8px gap)
 * - Lighter font weight (500) for elegant restraint
 * - Subtle icon opacity (0.12) to not overwhelm
 * - Ring dot with colored shadow for subtle emphasis
 */

/* Design System Variables */
:root {
    /* Primary Colors */
    --color-mauve-50: #FAF8F9;
    --color-mauve-100: #F3EEEF;
    --color-mauve-200: #E5D9DD;
    --color-mauve-500: #AB899A;
    --color-mauve-600: #957180;
    --color-mauve-700: #7A5A67;

    --color-sage-50: #F7F9F8;
    --color-sage-100: #EBF1EE;
    --color-sage-200: #D5E3DA;
    --color-sage-300: #B8CEC0;
    --color-sage-700: #5C6960;

    --color-gold-50: #FDFAF6;
    --color-gold-300: #EDE3CD;
    --color-gold-500: #D9C08A;
    --color-gold-700: #BEA160;

    --color-neutral-50: #F8F7F6;
    --color-neutral-100: #F0EFED;
    --color-neutral-200: #E8E6E4;
    --color-neutral-400: #A09D9A;
    --color-neutral-500: #706E6B;
    --color-neutral-600: #5A5856;
    --color-neutral-800: #3D3C3A;
    --color-neutral-900: #2D2C2B;
}

/* Card Container */
.card {
    border: 1px solid var(--color-neutral-200);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    min-height: 140px;
    transition: all 0.2s ease;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Card Background Gradients */
.card.completed {
    background: linear-gradient(135deg, white 0%, white 45%, var(--color-sage-100) 75%, var(--color-sage-200) 100%);
}

.card.in-progress {
    background: linear-gradient(135deg, white 0%, white 45%, var(--color-mauve-50) 75%, var(--color-mauve-100) 100%);
}

.card.pending {
    background: linear-gradient(135deg, white 0%, white 45%, var(--color-gold-50) 75%, var(--color-gold-300) 100%);
}

/* Status Indicator Container - Top Right, Vertically Stacked, Aligned with Heading */
.status-indicator {
    position: absolute;
    top: 26px;
    right: 16px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px; /* Space between label and icon */
}

/* Status Label (Dot + Text) */
.status-label {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between dot and text */
}

/* Status Dot with Ring Shadow */
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.completed {
    background: var(--color-sage-300);
    box-shadow: 0 0 0 4px rgba(184, 206, 192, 0.3);
}

.status-dot.in-progress {
    background: var(--color-mauve-500);
    box-shadow: 0 0 0 4px rgba(171, 137, 154, 0.3);
}

.status-dot.pending {
    background: var(--color-gold-500);
    box-shadow: 0 0 0 4px rgba(217, 192, 138, 0.3);
}

/* Status Text - Lighter Weight for Elegance */
.status-text {
    font-size: 10px;
    font-weight: 500; /* Lighter weight */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.status-text.completed {
    color: var(--color-sage-700);
}

.status-text.in-progress {
    color: var(--color-mauve-700);
}

.status-text.pending {
    color: var(--color-gold-700);
}

/* Status Icon - Subtle Opacity */
.status-icon {
    font-size: 60px;
    opacity: 0.12; /* Very subtle */
    line-height: 1;
}

.status-icon.completed {
    color: var(--color-sage-300);
}

.status-icon.in-progress {
    color: var(--color-mauve-500);
}

.status-icon.pending {
    color: var(--color-gold-500);
}

/* Card Content - Padding to Avoid Status Indicator */
.card-content {
    position: relative;
    z-index: 2;
    padding-right: 70px; /* Space for status indicator */
}

.card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-neutral-800);
    margin-bottom: 6px;
}

.card p {
    color: var(--color-neutral-500);
    font-size: 13px;
    margin: 0;
}

/* Card Metadata */
.card-meta {
    font-size: 13px;
    color: var(--color-neutral-400);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-neutral-200);
}

/* Progress Bar Component - Full Width */
.progress-container {
    margin-top: 12px;
    padding-right: 0;
    margin-right: -70px; /* Extend into status indicator padding */
    display: flex;
    align-items: center;
    gap: 12px; /* Space between bar and percentage */
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: var(--color-neutral-200);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 3px; /* Optical centering with percentage text */
}

.progress-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.progress-fill.completed {
    background: var(--color-sage-300);
}

.progress-fill.in-progress {
    background: var(--color-mauve-500);
}

.progress-fill.pending {
    background: var(--color-gold-500);
}

/* Progress Percentage - Accent Color, Inline Right */
.progress-percentage {
    font-size: 22px;
    font-weight: 500;
    opacity: 0.75;
    white-space: nowrap;
    min-width: 30px;
    text-align: right;
    line-height: 1;
}

.progress-percentage.completed {
    color: var(--color-sage-700);
}

.progress-percentage.in-progress {
    color: var(--color-mauve-700);
}

.progress-percentage.pending {
    color: var(--color-gold-700);
}

/**
 * HTML Structure:
 *
 * <div class="card completed|in-progress|pending">
 *   <div class="status-indicator">
 *     <div class="status-label">
 *       <div class="status-dot completed|in-progress|pending"></div>
 *       <div class="status-text completed|in-progress|pending">Done|Active|Pending</div>
 *     </div>
 *     <div class="status-icon completed|in-progress|pending">✓|→|⏱</div>
 *   </div>
 *   <div class="card-content">
 *     <h3>Card Title</h3>
 *     <p>Card description...</p>
 *
 *     <!-- Optional: Progress Bar (Full Width) -->
 *     <div class="progress-container">
 *       <div class="progress-bar">
 *         <div class="progress-fill completed|in-progress|pending" style="width: 65%"></div>
 *       </div>
 *       <div class="progress-percentage completed|in-progress|pending">65%</div>
 *     </div>
 *
 *     <!-- Optional: Metadata -->
 *     <div class="card-meta">
 *       Additional metadata text...
 *     </div>
 *   </div>
 * </div>
 */