/* Vessel Privacy Indicators CSS
 * Theme-aware styling for privacy badges
 * Uses CSS variables to ensure proper display in both dark and light themes
 */

/* Privacy Badge Base Styles */
.privacy-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.privacy-badge .privacy-icon {
    font-size: 14px;
    vertical-align: middle;
}

.privacy-badge .privacy-text {
    display: inline-block;
    vertical-align: middle;
}

/* Privacy Status Variants */

/* Public Access (Default) */
.privacy-badge.privacy-public {
    background-color: var(--bs-success-bg-subtle, rgba(40, 167, 69, 0.1));
    color: var(--bs-success, #28a745);
    border: 1px solid var(--bs-success-border-subtle, rgba(40, 167, 69, 0.2));
}

.privacy-badge.privacy-public:hover {
    background-color: var(--bs-success-bg-subtle, rgba(40, 167, 69, 0.15));
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.1);
}

/* Access Granted (User has permission to private content) */
.privacy-badge.privacy-granted {
    background-color: var(--bs-info-bg-subtle, rgba(23, 162, 184, 0.1));
    color: var(--bs-info, #17a2b8);
    border: 1px solid var(--bs-info-border-subtle, rgba(23, 162, 184, 0.2));
}

.privacy-badge.privacy-granted:hover {
    background-color: var(--bs-info-bg-subtle, rgba(23, 162, 184, 0.15));
    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.1);
}

/* Access Denied (Private vessel, user lacks permission) */
.privacy-badge.privacy-denied {
    background-color: var(--bs-warning-bg-subtle, rgba(255, 193, 7, 0.1));
    color: var(--bs-warning-text-emphasis, #997404);
    border: 1px solid var(--bs-warning-border-subtle, rgba(255, 193, 7, 0.2));
}

.privacy-badge.privacy-denied:hover {
    background-color: var(--bs-warning-bg-subtle, rgba(255, 193, 7, 0.15));
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.1);
    cursor: help;
}

/* Dark Theme Overrides */
@media (prefers-color-scheme: dark) {
    .privacy-badge.privacy-public {
        background-color: rgba(40, 167, 69, 0.15);
        color: #5cb85c;
        border-color: rgba(40, 167, 69, 0.3);
    }

    .privacy-badge.privacy-granted {
        background-color: rgba(91, 192, 222, 0.15);
        color: #5bc0de;
        border-color: rgba(91, 192, 222, 0.3);
    }

    .privacy-badge.privacy-denied {
        background-color: rgba(255, 193, 7, 0.15);
        color: #ffc107;
        border-color: rgba(255, 193, 7, 0.3);
    }
}

/* Explicit dark mode class support */
.dark-theme .privacy-badge.privacy-public,
[data-theme="dark"] .privacy-badge.privacy-public {
    background-color: rgba(40, 167, 69, 0.15);
    color: #5cb85c;
    border-color: rgba(40, 167, 69, 0.3);
}

.dark-theme .privacy-badge.privacy-granted,
[data-theme="dark"] .privacy-badge.privacy-granted {
    background-color: rgba(91, 192, 222, 0.15);
    color: #5bc0de;
    border-color: rgba(91, 192, 222, 0.3);
}

.dark-theme .privacy-badge.privacy-denied,
[data-theme="dark"] .privacy-badge.privacy-denied {
    background-color: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border-color: rgba(255, 193, 7, 0.3);
}

/* Responsive Design - Hide text on small screens */
@media (max-width: 768px) {
    .privacy-badge .privacy-text {
        display: none;
    }

    .privacy-badge {
        padding: 4px;
        border-radius: 50%;
        min-width: 24px;
        justify-content: center;
    }
}

/* Privacy Information Bar (for vessel details page) */
.privacy-info-bar {
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
}

.privacy-info-bar .material-icons {
    font-size: 20px;
    flex-shrink: 0;
}

.privacy-info-bar.privacy-restricted {
    background-color: var(--bs-warning-bg-subtle, #fff3cd);
    color: var(--bs-warning-text-emphasis, #856404);
    border: 1px solid var(--bs-warning-border-subtle, #ffeaa7);
}

.privacy-info-bar.privacy-granted {
    background-color: var(--bs-info-bg-subtle, #d1ecf1);
    color: var(--bs-info-text-emphasis, #0c5460);
    border: 1px solid var(--bs-info-border-subtle, #bee5eb);
}

.privacy-info-bar.privacy-owner-notice {
    background-color: var(--bs-primary-bg-subtle, #cce5ff);
    color: var(--bs-primary-text-emphasis, #004085);
    border: 1px solid var(--bs-primary-border-subtle, #b8daff);
}

/* Dark theme info bars */
@media (prefers-color-scheme: dark) {
    .privacy-info-bar.privacy-restricted {
        background-color: rgba(255, 193, 7, 0.1);
        color: #ffc107;
        border-color: rgba(255, 193, 7, 0.3);
    }

    .privacy-info-bar.privacy-granted {
        background-color: rgba(91, 192, 222, 0.1);
        color: #5bc0de;
        border-color: rgba(91, 192, 222, 0.3);
    }

    .privacy-info-bar.privacy-owner-notice {
        background-color: rgba(66, 139, 202, 0.1);
        color: #428bca;
        border-color: rgba(66, 139, 202, 0.3);
    }
}

.dark-theme .privacy-info-bar.privacy-restricted,
[data-theme="dark"] .privacy-info-bar.privacy-restricted {
    background-color: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border-color: rgba(255, 193, 7, 0.3);
}

.dark-theme .privacy-info-bar.privacy-granted,
[data-theme="dark"] .privacy-info-bar.privacy-granted {
    background-color: rgba(91, 192, 222, 0.1);
    color: #5bc0de;
    border-color: rgba(91, 192, 222, 0.3);
}

.dark-theme .privacy-info-bar.privacy-owner-notice,
[data-theme="dark"] .privacy-info-bar.privacy-owner-notice {
    background-color: rgba(66, 139, 202, 0.1);
    color: #428bca;
    border-color: rgba(66, 139, 202, 0.3);
}

/* Privacy Legend for vessel list */
.privacy-legend {
    display: flex;
    gap: 16px;
    padding: 8px 0;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--bs-secondary-color, #6c757d);
}

.privacy-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.privacy-legend-item .material-icons {
    font-size: 16px;
}