/**
 * Ultimate Watermark — Media Edit / Attachment screen integration
 *
 * Built on top of the design tokens declared in admin.css.
 *
 * @package UltimateWatermark
 * @since   2.0.9
 */

#ultimate-watermark-info {
    /* Fallback tokens if admin.css is not loaded on the attachment screen */
    --uw-primary:       #2563eb;
    --uw-primary-soft:  #eff6ff;
    --uw-primary-rgb:   15, 118, 110;
    --uw-surface:       #ffffff;
    --uw-surface-soft:  #f8fafc;
    --uw-surface-muted: #f1f5f9;
    --uw-border:        #e2e8f0;
    --uw-border-soft:   #f1f5f9;
    --uw-text:          #0f172a;
    --uw-text-muted:    #475569;
    --uw-text-subtle:   #64748b;
    --uw-text-faint:    #94a3b8;
    --uw-success:       #047857;
    --uw-success-soft:  #d1fae5;
    --uw-warning:       #b45309;
    --uw-warning-soft:  #fef3c7;
    --uw-danger:        #b91c1c;
    --uw-danger-soft:   #fee2e2;
}

#ultimate-watermark-info .watermark-status {
    background: var(--uw-surface);
    border: 1px solid var(--uw-border);
    border-radius: 10px;
    box-shadow: var(--uw-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06));
    padding: 16px;
}

#ultimate-watermark-info .watermark-status.no-watermarks {
    text-align: center;
    color: var(--uw-text-subtle);
    padding: 24px 16px;
}

#ultimate-watermark-info .watermark-status.no-watermarks .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    color: var(--uw-text-faint);
    display: block;
    margin: 0 auto 8px;
}

#ultimate-watermark-info .watermark-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--uw-border);
    margin-bottom: 12px;
}

#ultimate-watermark-info .watermark-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--uw-text);
}

#ultimate-watermark-info .watermark-title .dashicons {
    color: var(--uw-primary);
    font-size: 18px;
    width: 18px;
    height: 18px;
}

#ultimate-watermark-info .watermark-summary {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    background: var(--uw-primary-soft);
    color: var(--uw-primary);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

#ultimate-watermark-info .total-count { font-size: 14px; font-weight: 700; }

#ultimate-watermark-info .watermark-sizes-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#ultimate-watermark-info .size-card {
    background: var(--uw-surface);
    border: 1px solid var(--uw-border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#ultimate-watermark-info .size-card:hover {
    border-color: var(--uw-border);
    box-shadow: var(--uw-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06));
}

#ultimate-watermark-info .size-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--uw-surface-soft);
    border-bottom: 1px solid var(--uw-border);
}

#ultimate-watermark-info .size-info {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

#ultimate-watermark-info .size-image-preview {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--uw-surface-muted);
    border: 1px solid var(--uw-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ultimate-watermark-info .size-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#ultimate-watermark-info .size-icon-fallback .dashicons {
    color: var(--uw-text-faint);
    font-size: 18px;
}

#ultimate-watermark-info .size-details { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#ultimate-watermark-info .size-name { font-weight: 600; color: var(--uw-text); font-size: 13px; }
#ultimate-watermark-info .size-dimensions { color: var(--uw-text-faint); font-size: 11px; }

#ultimate-watermark-info .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}

#ultimate-watermark-info .status-badge.has-watermarks {
    background: var(--uw-success-soft);
    color: var(--uw-success);
    border-color: rgba(5, 150, 105, 0.18);
}

#ultimate-watermark-info .status-badge.no-watermarks {
    background: var(--uw-surface-muted);
    color: var(--uw-text-muted);
    border-color: var(--uw-border);
}

#ultimate-watermark-info .watermark-details {
    padding: 10px 12px;
    background: var(--uw-surface);
}

#ultimate-watermark-info .watermark-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#ultimate-watermark-info .watermark-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: var(--uw-surface-soft);
    border: 1px solid var(--uw-border);
    border-radius: 6px;
}

#ultimate-watermark-info .watermark-item-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--uw-text);
}

#ultimate-watermark-info .watermark-item-header .dashicons {
    color: var(--uw-primary);
    font-size: 14px;
    width: 14px;
    height: 14px;
}

#ultimate-watermark-info .watermark-name-link {
    color: var(--uw-text);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

#ultimate-watermark-info .watermark-name-link:hover { color: var(--uw-primary); }

#ultimate-watermark-info .watermark-type {
    color: var(--uw-text-faint);
    font-size: 11px;
    font-weight: 500;
}

#ultimate-watermark-info .text-watermark-preview,
#ultimate-watermark-info .image-watermark-preview {
    background: var(--uw-surface);
    border: 1px solid var(--uw-border-soft);
    border-radius: 6px;
    padding: 6px 10px;
    overflow: hidden;
}

#ultimate-watermark-info .image-watermark-preview img.watermark-image {
    max-height: 40px;
    max-width: 100%;
    object-fit: contain;
}

#ultimate-watermark-info .image-watermark-preview.no-image {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--uw-text-faint);
    font-size: 11px;
    font-style: italic;
}

#ultimate-watermark-info .watermark-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--uw-border);
}

#ultimate-watermark-info .watermark-actions .button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

#ultimate-watermark-info .watermark-actions .button .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

#ultimate-watermark-info .remove-all-watermarks-btn {
    color: var(--uw-danger);
    border-color: rgba(220, 38, 38, 0.3);
}

#ultimate-watermark-info .remove-all-watermarks-btn:hover {
    background: var(--uw-danger-soft);
    border-color: var(--uw-danger);
    color: #7f1d1d;
}