/*
====================================================
DoseClock Cards / Panels
Package 3
Clinical, accessible, reusable card styling
====================================================
*/

.card,
.panel,
.dashboard-card,
.medication-card,
.med-card,
.stock-card,
.prn-card,
.summary-card,
.info-card,
.content-card {
    background: #ffffff;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
}

.card + .card,
.panel + .panel,
.medication-card + .medication-card,
.med-card + .med-card,
.stock-card + .stock-card,
.prn-card + .prn-card,
.content-card + .content-card {
    margin-top: 1rem;
}

.card h1,
.card h2,
.card h3,
.card h4,
.panel h1,
.panel h2,
.panel h3,
.panel h4,
.dashboard-card h1,
.dashboard-card h2,
.dashboard-card h3,
.dashboard-card h4,
.medication-card h1,
.medication-card h2,
.medication-card h3,
.medication-card h4,
.med-card h1,
.med-card h2,
.med-card h3,
.med-card h4,
.stock-card h1,
.stock-card h2,
.stock-card h3,
.stock-card h4,
.prn-card h1,
.prn-card h2,
.prn-card h3,
.prn-card h4,
.summary-card h1,
.summary-card h2,
.summary-card h3,
.summary-card h4,
.info-card h1,
.info-card h2,
.info-card h3,
.info-card h4,
.content-card h1,
.content-card h2,
.content-card h3,
.content-card h4 {
    margin-bottom: 0.65rem;
}

.card p:last-child,
.panel p:last-child,
.dashboard-card p:last-child,
.medication-card p:last-child,
.med-card p:last-child,
.stock-card p:last-child,
.prn-card p:last-child,
.summary-card p:last-child,
.info-card p:last-child,
.content-card p:last-child {
    margin-bottom: 0;
}

.medication-card,
.med-card,
.prn-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.medication-card__header,
.med-card__header,
.prn-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.medication-card__title,
.med-card__title,
.prn-card__title,
.medication-name,
.med-name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-heading);
}

.medication-card__dose,
.med-card__dose,
.prn-card__dose,
.dose-text,
.medication-dose {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
}

.medication-card__meta,
.med-card__meta,
.prn-card__meta,
.medication-meta {
    font-size: 0.98rem;
    color: var(--color-muted);
}

.card-actions,
.medication-card__actions,
.med-card__actions,
.prn-card__actions,
.stock-card__actions,
.panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.dashboard-grid,
.card-grid,
.summary-grid,
.stock-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.dashboard-card,
.summary-card,
.stock-card {
    min-height: 100%;
}

.summary-card__value,
.stock-card__value,
.metric-value {
    display: block;
    font-size: 1.8rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-heading);
}

.summary-card__label,
.stock-card__label,
.metric-label {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-muted);
    font-weight: 600;
}

.card--success,
.panel--success,
.status-success,
.stock-card--safe {
    border-color: var(--color-success);
    background: #f0fdf4;
}

.card--warning,
.panel--warning,
.status-warning,
.stock-card--warning {
    border-color: var(--color-warning);
    background: #fffbeb;
}

.card--danger,
.panel--danger,
.status-danger,
.stock-card--danger,
.stock-card--low {
    border-color: var(--color-danger);
    background: #fef2f2;
}

.card--info,
.panel--info,
.status-info {
    border-color: var(--color-primary);
    background: #eff6ff;
}

.empty-state,
.no-results,
.no-medications {
    background: #ffffff;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    color: var(--color-muted);
}

.empty-state strong,
.no-results strong,
.no-medications strong {
    color: var(--color-heading);
}

@media (max-width: 768px) {
    .card,
    .panel,
    .dashboard-card,
    .medication-card,
    .med-card,
    .stock-card,
    .prn-card,
    .summary-card,
    .info-card,
    .content-card {
        padding: 1rem;
    }

    .medication-card__header,
    .med-card__header,
    .prn-card__header {
        flex-direction: column;
        align-items: stretch;
    }

    .card-actions,
    .medication-card__actions,
    .med-card__actions,
    .prn-card__actions,
    .stock-card__actions,
    .panel-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .summary-card__value,
    .stock-card__value,
    .metric-value {
        font-size: 1.55rem;
    }
}