/**
 * Medical Monitor Custom Styles
 * Admin and frontend styles for the plugin
 */

/* ========================================
   Article Source Badge Styles
   ======================================== */

.mm-source-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

/* Frontend Submission Badge */
.mm-source-frontend {
    background-color: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

/* Admin Created Badge */
.mm-source-admin {
    background-color: #f3e5f5;
    color: #6a1b9a;
    border: 1px solid #ce93d8;
}

/* Unknown/No Source Badge */
.mm-source-unknown {
    background-color: #f5f5f5;
    color: #757575;
    border: 1px solid #e0e0e0;
}

/* Hover effects for better UX */
.mm-source-badge:hover {
    opacity: 0.85;
}

/* ========================================
   Article Status Badge Styles
   ======================================== */

.mm-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

/* Eingereicht (Draft) - Gray/Blue */
.mm-status-draft {
    background-color: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

/* Peer Review (Pending) - Orange */
.mm-status-pending {
    background-color: #fff3e0;
    color: #e65100;
    border: 1px solid #ffb74d;
}

/* Angenommen (Accepted) - Green */
.mm-status-angenommen {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #81c784;
}

/* Veröffentlicht (Published) - Dark Green */
.mm-status-publish {
    background-color: #c8e6c9;
    color: #1b5e20;
    border: 1px solid #66bb6a;
}

/* Other statuses */
.mm-status-future {
    background-color: #e1f5fe;
    color: #01579b;
    border: 1px solid #4fc3f7;
}

.mm-status-private {
    background-color: #fce4ec;
    color: #880e4f;
    border: 1px solid #f48fb1;
}

.mm-status-trash {
    background-color: #ffebee;
    color: #b71c1c;
    border: 1px solid #e57373;
}

.mm-status-unknown {
    background-color: #f5f5f5;
    color: #757575;
    border: 1px solid #e0e0e0;
}

/* Hover effects for status badges */
.mm-status-badge:hover {
    opacity: 0.85;
}

/* ========================================
   eFirst Status Badge Styles
   ======================================== */

.mm-efirst-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 8px;
    border: 1px solid;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.mm-efirst-print {
    background-color: #f5f5f5;
    border-color: #e0e0e0;
    color: #616161;
}

.mm-efirst-only {
    background-color: #e3f2fd;
    border-color: #90caf9;
    color: #1565c0;
    margin-bottom: 8px;
}

.mm-efirst-both {
    background-color: #f3e5f5;
    border-color: #ce93d8;
    color: #6a1b9a;
}

/* ========================================
   Article Pre-title (Vorzeile)
   ======================================== */

.title.autoren-title .mm-vorzeile {
    margin: 0 0 0.5em;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
}

/* ========================================
   Article Gallery Styles (Frontend Single View)
   ======================================== */

/* Gallery container */
.gallery-holder {
    margin: 30px 0;
    padding: 0 15px;
}

/* Gallery grid */
.gallery-holder .man-area {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
}

/* Gallery items - responsive grid */
.gallery-holder .man-area a {
    display: block;
    width: calc(25% - 12px); /* 4 columns with gap */
    max-width: 250px;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-holder .man-area a:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Article images */
.gallery-holder .man-area img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.gallery-holder .man-area figcaption {
    margin-top: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .gallery-holder .man-area a {
        width: calc(33.333% - 10px); /* 3 columns */
        max-width: 280px;
    }
}

@media (max-width: 768px) {
    .gallery-holder .man-area a {
        width: calc(50% - 8px); /* 2 columns */
        max-width: none;
    }
}

@media (max-width: 480px) {
    .gallery-holder .man-area a {
        width: 100%; /* 1 column */
    }

    .gallery-holder .man-area {
        gap: 10px;
    }
}