/* css/dap-alert-panel.css */
#dap-alert-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999; /* Ensure it's above other elements */
    display: none; /* Hidden by default */
    opacity: 0; /* Start with transparent overlay */
    transition: opacity 0.3s ease-in-out;
}

#dap-alert-panel-overlay.is-open {
    display: block; /* Show the overlay when open */
    opacity: 1; /* Fade in the overlay */
}

#dap-alert-panel-content {
    position: fixed;
    top: 0;
    right: -40%; /* Start off-screen to the right */
    width: 40%; /* 40% width for desktop */
    height: 100%;
    background: #e3e3e3;
    padding: 20px;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3);
    overflow-y: auto; /* Enable scrolling if content is too long */
    transition: right 0.3s ease-in-out; /* Smooth slide transition */
    z-index: 100000; /* Ensure content is above overlay */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack children vertically */
}

#dap-alert-panel-overlay.is-open #dap-alert-panel-content {
    right: 0; /* Slide into view */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 782px) { /* WordPress admin bar breakpoint */
    #dap-alert-panel-content {
        width: 100%; /* Full width on smaller screens */
        right: -100%; /* Start off-screen to the right */
    }

    #dap-alert-panel-overlay.is-open #dap-alert-panel-content {
        right: 0; /* Slide into view */
    }
}

#dap-alert-panel-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    line-height: 1;
    padding: 0;
    transition: color 0.2s ease-in-out;
    z-index: 10; /* Ensure close button is above tabs */
}

#dap-alert-panel-close:hover {
    color: #333;
}

#dap-alert-panel-content h3.panel-title {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-size: 1.5em;
    color: #333;
    margin-bottom: 20px; /* Space below title */
}

/* Tab styling */
.dap-tabs {
    flex-grow: 1; /* Allow tabs content to take available space */
    display: flex;
    flex-direction: column;
}

.dap-tab-buttons {
    display: flex;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

.dap-tab-button {
    background: none;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-weight: bold;
    color: #555;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
    white-space: nowrap; /* Prevent text wrapping inside buttons */
    margin-right: 5px; /* Small space between buttons */
    margin-bottom: -1px; /* Overlap with border-bottom of container */
}

.dap-tab-button:hover {
    color: #0073aa; /* Default hover color */
}

.dap-tab-button.active {
    color: #0073aa;
    border-bottom-color: #0073aa;
}

/* Specific background colors for hover and active states */
.dap-tab-button[data-tab="info-tab"]:hover,
.dap-tab-button[data-tab="info-tab"].active {
    background-color: #fff3cd; /* Light yellow for information */
    color: #664d03; /* Darker text for contrast */
    border-bottom-color: #ffc107;
}

.dap-tab-button[data-tab="success-tab"]:hover,
.dap-tab-button[data-tab="success-tab"].active {
    background-color: #d1e7dd; /* Light green for success */
    color: #0f5132; /* Darker text for contrast */
    border-bottom-color: #198754;
}

.dap-tab-button[data-tab="error-tab"]:hover,
.dap-tab-button[data-tab="error-tab"].active {
    background-color: #f8d7da; /* Light red for alerts/errors */
    color: #842029; /* Darker text for contrast */
    border-bottom-color: #dc3545;
}

/* Hide the Total tab button and its content */
.dap-tab-button[data-tab="total-tab"] {
    display: none;
}

#total-tab {
    display: none;
} 

.dap-tab-content {
    flex-grow: 1; /* Allow tab content to take remaining space */
    overflow-y: auto; /* Enable scrolling within tab content if needed */
    padding-right: 10px; /* Add some padding for scrollbar */
}

.dap-tab-pane {
    display: none; /* Hide all panes by default */
}

.dap-tab-pane.active {
    display: block; /* Show active pane */
}

.dap-tab-pane h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #444;
    font-size: 1.2em;
}

/* Common styling for containers that will hold cloned alerts */
#dap-info-alerts-container,
#dap-success-alerts-container,
#dap-error-alerts-container {
    padding: 0; /* Remove default padding */
    list-style: none; /* Remove list style if it was ul */
}

/* Styling for the cloned alerts themselves to mimic dashboard appearance */
#dap-info-alerts-container .notice,
#dap-info-alerts-container .updated,
#dap-info-alerts-container .error,
#dap-info-alerts-container .success,
#dap-info-alerts-container .info,
#dap-info-alerts-container .notice-info,
#dap-info-alerts-container .notice-success,
#dap-info-alerts-container .notice-error,
#dap-info-alerts-container .notice-warning,
#dap-success-alerts-container .notice,
#dap-success-alerts-container .updated,
#dap-success-alerts-container .error,
#dap-success-alerts-container .success,
#dap-success-alerts-container .info,
#dap-success-alerts-container .notice-info,
#dap-success-alerts-container .notice-success,
#dap-success-alerts-container .notice-error,
#dap-success-alerts-container .notice-warning,
#dap-error-alerts-container .notice,
#dap-error-alerts-container .updated,
#dap-error-alerts-container .error,
#dap-error-alerts-container .success,
#dap-error-alerts-container .info,
#dap-error-alerts-container .notice-info,
#dap-error-alerts-container .notice-success,
#dap-error-alerts-container .notice-error,
#dap-error-alerts-container .notice-warning {
    margin: 0 0 15px 0; /* Add margin between alerts */
    padding: 10px; /* Standard padding */
    border-left: 4px solid; /* Standard WordPress notice border */
    box-shadow: 0 1px 1px rgba(0,0,0,.04); /* Standard shadow */
    border-radius: 3px; /* Standard border radius */
    word-wrap: break-word; /* Prevent overflow of long text/links */
    display: block !important; /* Force display to block to ensure visibility */
}

/* Re-apply WordPress notice colors for consistency */
#dap-info-alerts-container .notice-info,
#dap-info-alerts-container .info,
#dap-info-alerts-container .notice, /* Also apply to generic .notice for info */
#dap-info-alerts-container .updated { /* And .updated for info */
    border-color: #00a0d2;
    background-color: #e7f5fe; /* Light blue for info notices */
}

#dap-success-alerts-container .notice-success,
#dap-success-alerts-container .success {
    border-color: #46b450;
    background-color: #e6ffe6; /* Light green for success notices */
}

#dap-error-alerts-container .notice-error,
#dap-error-alerts-container .error,
#dap-error-alerts-container .notice-warning {
    border-color: #dc3232;
    background-color: #ffebe8; /* Light red for error/warning notices */
}

/* General list item styling for info and success tabs (which now use divs) */
/* These rules are now less relevant as content is directly appended to containers */
.dap-tab-pane ul {
    list-style-type: disc;
    margin-left: 20px;
    padding: 0;
}

.dap-tab-pane li {
    margin-bottom: 8px;
    line-height: 1.4;
    color: #333;
}

.dap-tab-pane .no-alerts-message {
    font-style: italic;
    color: #777;
    text-align: center;
    padding: 20px 0;
}

/* Admin bar alert label color */
/* Targeting the span directly within the admin bar item's ID, with higher specificity */
#wp-admin-bar-dap-alert-counter > .ab-item > #dap-admin-bar-alert-label.dap-has-alerts {
    color: #dc3232 !important; /* Red color for alerts */
}

#wp-admin-bar-dap-alert-counter > .ab-item > #dap-admin-bar-alert-icon.dap-has-alerts::before {
    color: #dc3232 !important; /* Red color for alerts */
}

#wp-admin-bar-dap-alert-counter > .ab-item > #dap-admin-bar-alert-label.dap-no-alerts,
#wp-admin-bar-dap-alert-counter > .ab-item > #dap-admin-bar-alert-icon.dap-no-alerts {
    color: #a0a5aa !important; /* Default grey color for no alerts */
}


#dap-info-alerts-container .update-nag,
#dap-info-alerts-container .notice,
#dap-info-alerts-container  .error,
#dap-info-alerts-container  .is-dismissible,
#dap-info-alerts-container  .settings-error,
#dap-info-alerts-container .updated {
    display: block !important;
}