/**
 * Admin Plugins Page Styles for Costly
 *
 * This file contains styles for the Costly plugin's row in the WordPress
 * plugins list page. It enhances the default WordPress plugins table with
 * custom styling, including action buttons, icons, and hover effects.
 *
 * @package     Costly_Pricing_Tables
 * @subpackage  Admin/Assets/CSS
 * @since       1.0.3
 * @author      Vortix | Estudio Creativo <web@vortixestudio.com>
 * @link        https://vortixestudio.com/plugins/costly-pricing-tables/
 * @license     GPL-3.0+
 * @copyright   2025 Vortix | Estudio Creativo
 */

/* CSS Variables for Costly plugin row */
:root {
    --costly-plugin-primary: #5d93c5;
    --costly-plugin-secondary: #3575b4;
    --costly-plugin-text: #022240;
    --costly-plugin-success: #28a745;
    --costly-plugin-warning: #fbbf24;
    --costly-plugin-error: #dc3545;
    --costly-plugin-white: #ffffff;
    --costly-plugin-light: #f1f1f1;
    --costly-plugin-border: #e9ecef;
    --costly-plugin-shadow: rgba(93, 147, 197, 0.15);
}

/* Main row styling */
.costly-plugin-row {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-left: 4px solid var(--costly-plugin-primary);
    box-shadow: 0 2px 8px var(--costly-plugin-shadow);
    transition: all 0.3s ease;
    position: relative;
}

/* Plugin title with icon */
.costly-plugin-row .plugin-title strong {
    color: var(--costly-plugin-primary);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.costly-plugin-row .plugin-title:before {
    content: "📊";
    font-size: 16px;
}

/* Actions container */
.costly-plugin-row .row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    padding: 0;
}

.costly-plugin-row .row-actions span {
    margin: 0;
    display: flex;
    gap: 5px;
}

/* Remove default separators */
.costly-plugin-row .row-actions span::after {
    display: none;
}

/* Main action buttons (Tables, Settings) */
.costly-plugin-row .row-actions .costly-action-link,
.costly-plugin-row .row-actions a {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--costly-plugin-text);
    color: var(--costly-plugin-white) !important;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(93, 147, 197, 0.25);
    line-height: 1;
}

.costly-plugin-row .row-actions .costly-action-link:hover,
.costly-plugin-row .row-actions a:hover {
    background: var(--costly-plugin-secondary);
}

.costly-plugin-row .row-actions span a .costly-action-icon {
    font-size: 13px;
}

.costly-plugin-row .row-actions span .costly-action-translate .costly-action-icon,
.costly-plugin-row .plugin-version-author-uri .costly-meta-review .costly-meta-icon {
    filter: brightness(100);
}

/* Review button */
.costly-plugin-row a[href*="reviews"] {
    background: linear-gradient(135deg, var(--costly-plugin-warning), #f59e0b);
    color: var(--costly-plugin-white) !important;
    box-shadow: 0 1px 4px rgba(251, 191, 36, 0.25);
}

.costly-plugin-row a[href*="reviews"]:hover {
    background: linear-gradient(135deg, #f59e0b, #c47d03);
}

/* Donate button */
.costly-plugin-row .costly-internal-link[href*="donate"] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: var(--costly-plugin-white) !important;
}

.costly-plugin-row .costly-internal-link[href*="donate"]:hover {
    background: linear-gradient(135deg, #059669, #047857);
}

/* Plugin description */
.costly-plugin-row .plugin-description {
    background: rgba(93, 147, 197, 0.2);
    border-radius: 6px;
    padding: 8px 12px;
    margin: 0 0 6px 0;
}

.costly-plugin-row .plugin-description p {
    color: var(--costly-plugin-text);
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
    font-weight: 400;
}

/* Version and author info */
.costly-plugin-row .plugin-version-author-uri {
    background: var(--costly-plugin-light);
    border-radius: 10px;
    padding: 6px 10px;
    color: var(--costly-plugin-text);
    font-size: 14px;
    font-weight: 400;
    margin-top: 6px;
    border: 1px solid var(--costly-plugin-border);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.costly-plugin-row .plugin-version-author-uri a {
    color: var(--costly-plugin-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 6px 8px;
    line-height: 1;
    border-radius: 12px;
    box-shadow: none !important;
    outline: none !important;
}

.costly-plugin-row .plugin-version-author-uri a:hover {
    background-color: var(--costly-plugin-text);
    color: var(--costly-plugin-white);
}

/* Custom checkbox */
.costly-plugin-row .check-column input[type="checkbox"] {
    accent-color: var(--costly-plugin-primary);
    transform: scale(1.1);
}

/* Hover effects */
.costly-plugin-row:hover .plugin-title strong {
    color: var(--costly-plugin-secondary);
}

/* Cell padding adjustment */
.costly-plugin-row td,
.costly-plugin-row th {
    padding: 12px 10px;
    vertical-align: top;
}

.toplevel_page_costly .wp-menu-image.svg {
    background-size: 14px auto !important;
}

/* Responsive design */
@media (max-width: 782px) {
    .costly-plugin-row {
        border-left-width: 3px;
    }

    .costly-plugin-row .plugin-title strong {
        font-size: 13px;
    }

    .costly-plugin-row .row-actions {
        flex-direction: row;
        gap: 4px;
    }

    .costly-plugin-row .costly-action-link {
        font-size: 10px;
        padding: 3px 8px;
    }

    .costly-plugin-row.active::after {
        position: static;
        display: inline-block;
        margin: 4px 0;
        font-size: 8px;
        padding: 2px 6px;
    }
}