/* ==========================================================
   SmartGen Plugin Styles
   Author: ComboInvest Team
   Description: Comprehensive styles for the SmartGen WordPress plugin,
                including activity logging, dashboard, and various components.
   ========================================================== */

/* ----------------------------------------------------------
   Root Variables
   ---------------------------------------------------------- */
/* CSS variables for easy theme customization */
:root {
    --primary-color: #1abc9c;           /* Main accent color */
    --secondary-color: #34495e;        /* Secondary color */
    --background-color: #f9fafb;       /* Background color for pages */
    --form-background: #ffffff;        /* Background color for forms and cards */
    --border-color: #e5e7eb;           /* Default border color */
    --text-color: #2c3e50;             /* Default text color */
    --button-hover-color: #16a085;     /* Hover color for buttons */
    --input-border-radius: 8px;        /* Border radius for inputs and buttons */
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Default box shadow */
    --input-padding: 12px;             /* Padding inside inputs */
    --font-family: 'Poppins', sans-serif; /* Default font family */
    --transition-duration: 0.3s;       /* Default transition duration */
}

/* ==========================================================
   Spinner Design for Loading Indicator
   ========================================================== */

/*  spinner style  
   This style adds a dual-ring spinner effect on elements with the "loading" class.
   The spinner is composed of two circles: an outer and an inner ring.
   Each ring has a border with one visible color and rotates in opposite directions.
*/
.loading::before {
    content: '';                                 /* Empty content to create the outer ring */
    position: absolute;                          /* Position spinner in relation to its parent */
    top: 50%;                                    /* Center vertically */
    left: 50%;                                   /* Center horizontally */
    width: 50px;                                 /* Diameter of outer ring */
    height: 50px;                                /* Diameter of outer ring */
    border: 4px solid transparent;               /* Transparent base border */
    border-top-color: var(--primary-color);      /* Top border color for outer ring */
    border-bottom-color: var(--secondary-color); /* Bottom border color for contrasting effect */
    border-radius: 50%;                          /* Circular shape */
    animation: dual-spin 1s linear infinite;     /* Clockwise spin animation */
    transform: translate(-50%, -50%);            /* Center the spinner in the parent */
}

/* Inner spinner ring for .loading 
   Adds a smaller inner ring to the spinner that rotates in the opposite direction.
   Creates a dynamic dual-ring spinner effect.
*/
.loading::after {
    content: '';                                 /* Empty content to create the inner ring */
    position: absolute;                          /* Position relative to parent */
    top: 50%;                                    /* Center vertically */
    left: 50%;                                   /* Center horizontally */
    width: 30px;                                 /* Diameter of inner ring, smaller than outer */
    height: 30px;                                /* Diameter of inner ring */
    border: 3px solid transparent;               /* Transparent base border */
    border-top-color: var(--secondary-color);    /* Top border color for inner ring */
    border-radius: 50%;                          /* Circular shape */
    animation: dual-spin-reverse 0.8s linear infinite; /* Counter-clockwise spin animation */
    transform: translate(-50%, -50%);            /* Center the inner spinner in the parent */
}

/* Spinner animations for .loading
   These keyframes control the rotation direction of each ring.
   - dual-spin: rotates the outer ring clockwise.
   - dual-spin-reverse: rotates the inner ring counter-clockwise.
*/
@keyframes dual-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg); /* Full clockwise rotation */
    }
}

@keyframes dual-spin-reverse {
    to {
        transform: translate(-50%, -50%) rotate(-360deg); /* Full counter-clockwise rotation */
    }
}



/* ==========================================================
   Activity & Logging Styles
   ========================================================== */

/* General Wrapper Styling */
/* Applies font family to the activity and logging wrapper */
.wrap.smartgen-activity-logging-wrapper {
    font-family: var(--font-family);
}

/* Card Layout */
/* Styles for the unified card layout */
.smartgen-card.unified-card {
    background-color: var(--form-background);    /* Card background color */
    border: 1px solid var(--border-color);       /* Card border */
    border-radius: 10px;                         /* Rounded corners */
    margin: 20px 0;                              /* Vertical margin */
    box-shadow: var(--box-shadow);               /* Shadow effect */
    transition: transform var(--transition-duration), box-shadow var(--transition-duration); /* Smooth transitions */
}

/* Hover effect for cards */
.smartgen-card:hover {
    transform: translateY(-3px);                 /* Slight upward movement on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);  /* Enhanced shadow on hover */
}

/* Card Header */
/* Styles for the header section of the card */
.smartgen-card .card-header {
    background-color: var(--primary-color);      /* Header background color */
    color: #fff;                                 /* Header text color */
    padding: 5px;                                /* Inner padding */
    padding-bottom: 20px;                        /* Extra bottom padding */
    border-top-left-radius: 10px;                /* Rounded top-left corner */
    border-top-right-radius: 10px;               /* Rounded top-right corner */
    font-size: 22px;                             /* Header font size */
    font-weight: bold;                           /* Bold text */
    margin-bottom: 15px;                         /* Space below header */
}

/* Collapsible Section Headers */
/* Styles for the headers of collapsible sections */
.section-header {
    background-color: #f9f9f9;                   /* Header background */
    padding: 15px;                               /* Inner padding */
    cursor: pointer;                             /* Pointer cursor on hover */
    display: flex;                               /* Flex layout */
    justify-content: space-between;              /* Space between elements */
    align-items: center;                         /* Center items vertically */
    border: 1px solid var(--border-color);       /* Border */
    border-radius: 8px;                          /* Rounded corners */
    margin-bottom: 10px;                         /* Space below header */
    transition: background-color 0.3s ease;      /* Smooth background transition */
}

/* Title within collapsible section headers */
.section-header h2 {
    margin: 0;                                   /* Remove default margin */
    font-size: 18px;                             /* Font size */
    color: var(--text-color);                    /* Text color */
}

/* Hover effect for section headers */
.section-header:hover {
    background-color: #e9e9e9;                   /* Slightly darker background */
}

/* Toggle icon within section headers */
.section-header .toggle-icon {
    font-size: 20px;                             /* Icon size */
    color: var(--primary-color);                 /* Icon color */
    transition: transform var(--transition-duration); /* Smooth rotation */
}

/* Rotation for the toggle icon when active */
.rotate {
    transform: rotate(-90deg);                   /* Rotate icon */
}

/* Collapsible Section Content */
/* Styles for the content inside collapsible sections */
.section-content {
    display: none;                               /* Hidden by default */
    padding: 20px;                               /* Inner padding */
    border: 1px solid var(--border-color);       /* Border */
    border-radius: 8px;                          /* Rounded corners */
    background-color: #ffffff;                   /* Background color */
    margin-bottom: 15px;                         /* Space below content */
    font-size: 15px;                             /* Font size */
    color: var(--text-color);                    /* Text color */
}

/* Centered Button Wrapper */
/* Centers buttons horizontally */
.button-center {
    text-align: center;                          /* Center align */
    margin-top: 20px;                            /* Top margin */
}

/* Button Styling */
/* General styles for buttons */
button {
    background-color: var(--primary-color);      /* Button background */
    color: #ffffff;                              /* Button text color */
    border: none;                                /* No border */
    padding: 10px 20px;                          /* Padding */
    border-radius: var(--input-border-radius);   /* Rounded corners */
    cursor: pointer;                             /* Pointer cursor */
    font-size: 14px;                             /* Font size */
    transition: background-color 0.2s ease;      /* Smooth background transition */
}

/* Hover effect for buttons */
button:hover {
    background-color: var(--button-hover-color); /* Change background on hover */
}

/* Maintenance Section Buttons */
/* Layout for maintenance buttons */
.smartgen-maintenance-buttons {
    display: flex;                               /* Flex layout */
    justify-content: space-between;              /* Space between items */
    flex-wrap: wrap;                             /* Wrap items */
    gap: 10px;                                   /* Gap between items */
}

/* Individual maintenance items */
.smartgen-maintenance-item {
    flex: 1;                                     /* Flexible width */
    min-width: 150px;                            /* Minimum width */
    text-align: center;                          /* Center text */
    margin-bottom: 15px;                         /* Bottom margin */
}

/* Description under buttons */
.button-description {
    margin-top: 5px;                             /* Top margin */
    font-size: 13px;                             /* Font size */
    color: var(--text-color);                    /* Text color */
}

/* System Info and Logs Tables */
/* Styles for tables displaying system info and logs */
.smartgen-system-info-table,
.smartgen-activity-logs-table {
    width: 100%;                                 /* Full width */
    border-collapse: collapse;                   /* Collapse borders */
    margin-top: 10px;                            /* Top margin */
}

/* Table cells */
.smartgen-system-info-table th,
.smartgen-activity-logs-table th,
.smartgen-system-info-table td,
.smartgen-activity-logs-table td {
    padding: 10px 15px;                          /* Cell padding */
    border: 1px solid var(--border-color);       /* Cell border */
    text-align: left;                            /* Left align text */
    font-size: 14px;                             /* Font size */
    color: var(--text-color);                    /* Text color */
}

/* Table headers */
.smartgen-system-info-table th,
.smartgen-activity-logs-table th {
    background-color: var(--primary-color);      /* Header background */
    color: #ffffff;                              /* Header text color */
    font-weight: bold;                           /* Bold text */
}

/* Notifications */
/* Styles for notification messages */
#smartgen-notification-delete {
    margin: 15px 0;                              /* Vertical margin */
    padding: 12px;                               /* Padding */
    border-radius: 8px;                          /* Rounded corners */
    font-size: 14px;                             /* Font size */
    display: flex;                               /* Flex layout */
    align-items: center;                         /* Center items vertically */
}

/* Success notification */
#smartgen-notification-delete.success {
    background-color: #e0f7ec;                   /* Background color */
    color: var(--text-color);                    /* Text color */
}

/* Error notification */
#smartgen-notification-delete.error {
    background-color: #ffebee;                   /* Background color */
    color: #c62828;                              /* Text color */
}

/* Mobile Adjustments */
/* Responsive styles for smaller screens */
@media (max-width: 768px) {
    /* Stack maintenance buttons vertically */
    .smartgen-maintenance-buttons {
        flex-direction: column;                  /* Column layout */
        align-items: stretch;                    /* Stretch items */
    }

    /* Center maintenance items */
    .smartgen-maintenance-item {
        text-align: center;                      /* Center text */
    }

    /* Adjust description margin */
    .button-description {
        margin-top: 8px;                         /* Increased top margin */
    }
}

/* ==========================================================
   Two-Column Layout Styles
   ========================================================== */

/* Row container for two-column layouts */
.smartgen-row {
    display: flex;                               /* Flex layout */
    gap: 20px;                                   /* Gap between columns */
    flex-wrap: wrap;                             /* Wrap columns */
}

/* Columns inside the row */
.smartgen-card .card-content > .smartgen-row > div {
    flex: 1 1 50%;                               /* Each takes up 50% */
}

/* ==========================================================
   Tool Usage Chart Styles
   ========================================================== */

/* Date filters layout */
.smartgen-date-filters {
    display: flex;                               /* Flex layout */
    gap: 10px;                                   /* Gap between elements */
    justify-content: space-between;              /* Space out elements */
    align-items: center;                         /* Center items vertically */
    flex-wrap: wrap;                             /* Wrap elements */
    margin-bottom: 15px;                         /* Bottom margin */
}

/* Date filter fields */
.smartgen-date-filters .date-filter {
    width: 30%;                                  /* Width percentage */
    margin-bottom: 0;                            /* Remove bottom margin */
}

/* Input field styling */
.smartgen-date-input {
    padding: 8px;                                /* Padding */
    font-size: 13px;                             /* Font size */
    width: auto;                                 /* Auto width */
    border-radius: 6px;                          /* Rounded corners */
}

/* Button wrapper */
.smartgen-button-wrapper {
    width: 30%;                                  /* Width percentage */
    display: flex;                               /* Flex layout */
    justify-content: center;                     /* Center button */
    align-items: center;                         /* Center vertically */
}

/* Filter button styling */
.smartgen-filter-button {
    padding: auto;                               /* Auto padding */
    font-size: 13px;                             /* Font size */
    width: auto;                                 /* Auto width */
    height: auto;                                /* Auto height */
}

/* Adjust card dimensions */
.smartgen-card {
    height: auto;                                /* Auto height */
    padding: 15px;                               /* Padding */
    box-sizing: border-box;                      /* Include padding in width */
}

/* Chart dimensions */
#smartgen-tool-usage-chart {
    height: 50%;                                 /* Height percentage */
    width: 100%;                                 /* Full width */
}

/* ==========================================================
   General Wrapper Styles
   ========================================================== */

/* Dashboard overview wrapper */
.smartgen-dashboard-overview {
    display: flex;                               /* Flex layout */
    flex-wrap: wrap;                             /* Wrap items */
    gap: 20px;                                   /* Gap between items */
    font-family: var(--font-family);             /* Font family */
}

/* ==========================================================
   Card Styles
   ========================================================== */

/* General card styling */
.smartgen-card {
    background-color: var(--form-background);    /* Background color */
    flex: 1 1 calc(50% - 20px);                  /* Flexible width */
    padding: 0;                                  /* No padding */
    border-radius: 10px;                         /* Rounded corners */
    box-shadow: var(--box-shadow);               /* Shadow effect */
    min-width: 280px;                            /* Minimum width */
    display: flex;                               /* Flex layout */
    flex-direction: column;                      /* Column layout */
    position: relative;                          /* Relative positioning */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

/* Hover effect for cards */
.smartgen-card:hover {
    transform: translateY(-3px);                 /* Slight upward movement */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);  /* Enhanced shadow */
}

/* Card header styling */
.card-header {
    background-color: var(--primary-color);      /* Header background */
    color: #fff;                                 /* Text color */
    padding: 15px;                               /* Padding */
    border-top-left-radius: 10px;                /* Rounded top-left */
    border-top-right-radius: 10px;               /* Rounded top-right */
    position: relative;                          /* Relative positioning */
}

/* Header title */
.card-header h3 {
    margin: 0;                                   /* Remove margin */
    font-size: 18px;                             /* Font size */
    display: flex;                               /* Flex layout */
    align-items: center;                         /* Center vertically */
    gap: 10px;                                   /* Gap between elements */
    transition: color var(--transition-duration);/* Smooth color transition */
}

/* Hover effect for header title */
.card-header h3:hover {
    color: var(--button-hover-color);            /* Change color on hover */
}

/* ==========================================================
   Circular Tool Counter Styles
   ========================================================== */

/* Circular counter positioned in the card */
.tool-counter-circle {
    position: absolute;                          /* Absolute positioning */
    top: 15px;                                   /* Top position */
    right: 15px;                                 /* Right position */
    width: 60px;                                 /* Width */
    height: 60px;                                /* Height */
   background-color: rgba(0, 0, 0, 0.5);        /* Background color: Black with 50% transparency */
    border-radius: 50%;                          /* Circular shape */
    display: flex;                               /* Flex layout */
    flex-direction: column;                      /* Column layout */
    justify-content: center;                     /* Center vertically */
    align-items: center;                         /* Center horizontally */
    color: #fff;                                 /* Text color */
    font-weight: bold;                           /* Bold text */
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);  /* Light shadow effect */}

/* Counter number styling */
.tool-counter-circle .counter-number {
    font-size: 22px;                             /* Font size */
}

/* Counter text styling */
.tool-counter-circle .counter-text {
    font-size: 12px;                             /* Font size */
    margin-top: 1px;                             /* Top margin */
}

/* Specific styling for usage counter */
.tool-counter-circle.usage-counter {
}

/* ==========================================================
   Table Container Styles
   ========================================================== */

/* Scrollable table container with fixed header */
.table-container {
    max-height: 350px;                           /* Max height */
    overflow-y: auto;                            /* Vertical scroll */
    overflow-x: hidden;                          /* Hide horizontal scroll */
    margin-top: 8px;                             /* Top margin */
    border: 1px solid var(--border-color);       /* Border */
    border-radius: 5px;                          /* Rounded corners */
}

/* ==========================================================
   Button Styles
   ========================================================== */

/* Edit and delete buttons */
.smartgen-edit-button,
.smartgen-delete-button {
    padding: 8px;                                /* Padding */
    font-size: 12px;                             /* Font size */
    background-color: var(--primary-color);      /* Background color */
    border: none;                                /* No border */
    border-radius: var(--input-border-radius);   /* Rounded corners */
    color: #fff;                                 /* Text color */
    font-family: var(--font-family);             /* Font family */
    cursor: pointer;                             /* Pointer cursor */
    transition: background-color var(--transition-duration), box-shadow var(--transition-duration); /* Smooth transitions */
    box-shadow: var(--box-shadow);               /* Shadow effect */
    text-align: center;                          /* Center text */
    display: inline-block;                       /* Inline block */
    width: 70px;                                 /* Fixed width */
    margin-right: 5px;                           /* Right margin */
    text-decoration: none;                       /* No underline */
}

/* Hover effect for buttons */
.smartgen-edit-button:hover,
.smartgen-delete-button:hover {
    background-color: var(--button-hover-color); /* Change background */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);   /* Enhanced shadow */
}

/* Delete button specific styling */
.smartgen-delete-button {
    background-color: #e74c3c;                   /* Red background */
}

/* Hover effect for delete button */
.smartgen-delete-button:hover {
    background-color: #c0392b;                   /* Darker red */
}

/* ==========================================================
   Tooltip Styles
   ========================================================== */

/* Tooltip container */
.smartgen-tooltip {
    position: relative;                          /* Relative positioning */
    display: inline-block;                       /* Inline block */
    margin-left: 8px;                            /* Left margin */
    cursor: pointer;                             /* Pointer cursor */
}

/* Tooltip icon */
.smartgen-tooltip .dashicons {
    font-size: 16px;                             /* Icon size */
    color: #fff;                                 /* Icon color */
    transition: color var(--transition-duration);/* Smooth color transition */
}

/* Hover effect for icon */
.smartgen-tooltip:hover .dashicons {
    color: var(--button-hover-color);            /* Change color on hover */
}

/* Tooltip text */
.smartgen-tooltip .tooltip-text {
    visibility: hidden;                          /* Hidden by default */
    width: max-content;                          /* Dynamic width */
    background-color: rgba(0, 0, 0, 0.85);       /* Background color */
    color: #fff;                                 /* Text color */
    text-align: center;                          /* Center text */
    padding: 8px 12px;                           /* Padding */
    border-radius: 6px;                          /* Rounded corners */
    position: absolute;                          /* Absolute positioning */
    z-index: 9999;                               /* High z-index */
    bottom: 125%;                                /* Position above icon */
    left: 50%;                                   /* Center horizontally */
    transform: translateX(-50%);                 /* Adjust position */
    opacity: 0;                                  /* Transparent */
    transition: opacity var(--transition-duration), visibility var(--transition-duration); /* Smooth transitions */
    font-size: 12px;                             /* Font size */
}

/* Tooltip arrow */
.smartgen-tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;                                   /* Position below tooltip */
    left: 50%;                                   /* Center horizontally */
    transform: translateX(-50%);                 /* Adjust position */
    border-width: 6px;                           /* Arrow size */
    border-style: solid;                         /* Solid border */
    border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent; /* Arrow colors */
}

/* Show tooltip on hover */
.smartgen-tooltip:hover .tooltip-text {
    visibility: visible;                         /* Make visible */
    opacity: 1;                                  /* Fully opaque */
}

/* ==========================================================
   Notifications Panel Styles
   ========================================================== */

/* Notifications list */
.smartgen-notifications {
    list-style: none;                            /* Remove bullets */
    padding: 0;                                  /* Remove padding */
    margin: 0;                                   /* Remove margin */
}

/* Individual notification */
.smartgen-notification {
    display: flex;                               /* Flex layout */
    align-items: center;                         /* Center vertically */
    gap: 10px;                                   /* Gap between items */
    padding: 12px;                               /* Padding */
    border-radius: 8px;                          /* Rounded corners */
    margin-bottom: 10px;                         /* Bottom margin */
    font-size: 14px;                             /* Font size */
    position: relative;                          /* Relative positioning */
    animation: fadeIn 0.5s ease;                 /* Fade-in animation */
    transition: transform var(--transition-duration); /* Smooth movement */
}

/* Hover effect for notifications */
.smartgen-notification:hover {
    transform: translateX(5px);                  /* Slight right movement */
}

/* Success notification styling */
.smartgen-notification.success {
    background-color: #e0f7ec;                   /* Background color */
    color: #2e7d32;                              /* Text color */
}

/* Error notification styling */
.smartgen-notification.error {
    background-color: #ffebee;                   /* Background color */
    color: #c62828;                              /* Text color */
}

/* Warning notification styling */
.smartgen-notification.warning {
    background-color: #fff3e0;                   /* Background color */
    color: #ef6c00;                              /* Text color */
}

/* Info notification styling */
.smartgen-notification.info {
    background-color: #e3f2fd;                   /* Background color */
    color: #0277bd;                              /* Text color */
}

/* Notification icons */
.smartgen-notification .dashicons {
    font-size: 20px;                             /* Icon size */
}

/* Dismiss button for notifications */
.dismiss-notification {
    position: absolute;                          /* Absolute positioning */
    top: 8px;                                    /* Top position */
    right: 12px;                                 /* Right position */
    background: transparent;                     /* Transparent background */
    border: none;                                /* No border */
    font-size: 18px;                             /* Font size */
    cursor: pointer;                             /* Pointer cursor */
    color: inherit;                              /* Inherit text color */
    transition: color var(--transition-duration);/* Smooth color transition */
}

/* Hover effect for dismiss button */
.dismiss-notification:hover {
    color: var(--secondary-color);               /* Change color on hover */
}

/* Fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;                              /* Start transparent */
        transform: translateY(-10px);            /* Start slightly above */
    }
    to {
        opacity: 1;                              /* End opaque */
        transform: translateY(0);                /* End at original position */
    }
}

/* ==========================================================
   Loading Spinner Styles
   ========================================================== */

/* Loading state for cards */
.smartgen-card.loading::after {
    content: '';                                 /* Empty content */
    position: absolute;                          /* Absolute positioning */
    top: 50%;                                    /* Center vertically */
    left: 50%;                                   /* Center horizontally */
    width: 40px;                                 /* Spinner size */
    height: 40px;                                /* Spinner size */
    margin: -20px 0 0 -20px;                     /* Adjust position */
    border: 4px solid var(--primary-color);      /* Border */
    border-top: 4px solid transparent;           /* Transparent top */
    border-radius: 50%;                          /* Circular shape */
    animation: spin 1s linear infinite;          /* Spin animation */
}

/* Dim the card when loading */
.smartgen-card.loading {
    position: relative;                          /* Relative positioning */
    opacity: 0.6;                                /* Reduced opacity */
    pointer-events: none;                        /* Disable interactions */
}

/* Spin animation */
@keyframes spin {
    to {
        transform: rotate(360deg);               /* Full rotation */
    }
}

/* ==========================================================
   Hover Effects for Buttons
   ========================================================== */

/* Hover effect for general buttons */
.button:hover,
.view-all-tools a:hover {
    background-color: var(--button-hover-color); /* Change background */
}

/* ==========================================================
   Quick Access Toolbar Styles
   ========================================================== */

/* Toolbar container */
.smartgen-quick-access-toolbar {
    display: flex;                               /* Flex layout */
    justify-content: center;                     /* Center items */
    gap: 10px;                                   /* Gap between buttons */
    padding: 15px 20px;                          /* Padding */
    background-color: var(--form-background);    /* Background color */
    border-radius: 8px;                          /* Rounded corners */
    box-shadow: var(--box-shadow);               /* Shadow effect */
    margin-top: 20px;                            /* Top margin */
    margin-bottom: 0;                            /* Remove bottom margin */
}

/* Toolbar buttons */
.smartgen-quick-access-toolbar .button {
    display: flex;                               /* Flex layout */
    align-items: center;                         /* Center vertically */
    padding: 10px 15px;                          /* Padding */
    font-family: var(--font-family);             /* Font family */
    background-color: var(--primary-color);      /* Background color */
    border: none;                                /* No border */
    color: #fff;                                 /* Text color */
    border-radius: var(--input-border-radius);   /* Rounded corners */
    box-shadow: var(--box-shadow);               /* Shadow effect */
    cursor: pointer;                             /* Pointer cursor */
    transition: background-color var(--transition-duration), box-shadow var(--transition-duration); /* Smooth transitions */
}

/* Hover effect for toolbar buttons */
.smartgen-quick-access-toolbar .button:hover {
    background-color: var(--button-hover-color); /* Change background */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);   /* Enhanced shadow */
}

/* Toolbar icons */
.smartgen-quick-access-toolbar .dashicons {
    font-size: 18px;                             /* Icon size */
    margin-right: 8px;                           /* Right margin */
}

/* ==========================================================
   Feature Request Form Styles
   ========================================================== */

/* Feature request container */
.smartgen-feature-request {
    margin-top: 20px;                            /* Top margin */
    padding: 10px;                               /* Padding */
    background-color: #f9fafb;                   /* Background color */
    border-left: 4px solid var(--primary-color); /* Left border */
    border-radius: 5px;                          /* Rounded corners */
    transition: background-color var(--transition-duration); /* Smooth transition */
}

/* Feature request header */
.smartgen-feature-request h4 {
    margin: 0 0 10px 0;                          /* Margin */
    font-size: 16px;                             /* Font size */
    color: var(--text-color);                    /* Text color */
    cursor: pointer;                             /* Pointer cursor */
    user-select: none;                           /* Disable text selection */
    display: flex;                               /* Flex layout */
    align-items: center;                         /* Center vertically */
    justify-content: space-between;              /* Space between elements */
}

/* Toggle arrow for header */
.smartgen-feature-request h4::after {
    content: '\25BC';                            /* Down arrow */
    font-size: 14px;                             /* Font size */
    transition: transform var(--transition-duration); /* Smooth rotation */
}

/* Collapsed state */
.smartgen-feature-request.collapsed h4::after {
    transform: rotate(-90deg);                   /* Rotate arrow */
}

/* Form content */
.smartgen-feature-request .form-content {
    display: none;                               /* Hidden by default */
    margin-top: 10px;                            /* Top margin */
}

/* Expanded state */
.smartgen-feature-request.expanded .form-content {
    display: block;                              /* Show content */
}

/* Form groups */
.smartgen-feature-request .form-group {
    margin-bottom: 15px;                         /* Bottom margin */
}

/* Form labels */
.smartgen-feature-request label {
    display: block;                              /* Block display */
    margin-bottom: 5px;                          /* Bottom margin */
    font-size: 14px;                             /* Font size */
    color: var(--text-color);                    /* Text color */
}

/* Form inputs */
.smartgen-feature-request input[type="text"],
.smartgen-feature-request select,
.smartgen-feature-request textarea {
    width: 100%;                                 /* Full width */
    padding: 8px;                                /* Padding */
    border: 1px solid var(--border-color);       /* Border */
    border-radius: var(--input-border-radius);   /* Rounded corners */
    font-family: var(--font-family);             /* Font family */
    font-size: 14px;                             /* Font size */
    box-sizing: border-box;                      /* Include padding in width */
    transition: border-color var(--transition-duration), box-shadow var(--transition-duration); /* Smooth transitions */
}

/* Focus state for inputs */
.smartgen-feature-request input[type="text"]:focus,
.smartgen-feature-request select:focus,
.smartgen-feature-request textarea:focus {
    border-color: var(--primary-color);          /* Change border color */
    box-shadow: 0 0 5px rgba(26, 188, 156, 0.3); /* Shadow effect */
}

/* Textarea resize */
.smartgen-feature-request textarea {
    resize: vertical;                            /* Allow vertical resize */
}

/* Submit button */
.smartgen-feature-request button {
    padding: 10px 15px;                          /* Padding */
    background-color: var(--primary-color);      /* Background color */
    border: none;                                /* No border */
    border-radius: var(--input-border-radius);   /* Rounded corners */
    color: #fff;                                 /* Text color */
    font-size: 14px;                             /* Font size */
    cursor: pointer;                             /* Pointer cursor */
    transition: background-color var(--transition-duration), box-shadow var(--transition-duration); /* Smooth transitions */
}

/* Hover effect for submit button */
.smartgen-feature-request button:hover {
    background-color: var(--button-hover-color); /* Change background */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);   /* Enhanced shadow */
}

/* ==========================================================
   Card Content Styles
   ========================================================== */

/* Content area within cards */
.card-content {
    padding: 20px;                               /* Padding */
    flex-grow: 1;                                /* Allow content to grow */
    overflow-y: auto;                            /* Vertical scroll */
}

/* ==========================================================
   General Card Styles
   ========================================================== */

/* Adjusted card dimensions */
.smartgen-card {
    width: 100%;                                 /* Full width */
    height: 100%;                                /* Full height */
    background-color: var(--form-background);    /* Background color */
    padding: 0;                                  /* No padding */
    border-radius: 10px;                         /* Rounded corners */
    box-shadow: var(--box-shadow);               /* Shadow effect */
    overflow: hidden;                            /* Hide overflow */
}

/* Card header */
.smartgen-card .card-header {
    background-color: var(--primary-color);      /* Header background */
    color: #fff;                                 /* Text color */
    padding: 20px;                               /* Padding */
    border-top-left-radius: 10px;                /* Rounded corners */
    border-top-right-radius: 10px;
}

/* Card content */
.smartgen-card .card-content {
    padding: 15px;                               /* Padding */
    margin: 0;                                   /* Remove margin */
    overflow-y: auto;                            /* Vertical scroll */
}

/* ==========================================================
   Active Tools Table Styles
   ========================================================== */

/* Desktop table format */
.smartgen-active-tools-table {
    width: 100%;                                 /* Full width */
    border-collapse: collapse;                   /* Collapse borders */
    table-layout: fixed;                         /* Fixed layout */
}

/* Table cells */
.smartgen-active-tools-table th,
.smartgen-active-tools-table td {
    padding: 12px 20px;                          /* Cell padding */
    border: 1px solid var(--border-color);       /* Cell border */
    background-color: #f5f5f5;                   /* Cell background */
    text-align: center;                          /* Center text */
    font-size: 14px;                             /* Font size */
    color: var(--text-color);                    /* Text color */
    font-weight: bold;                           /* Bold text */
    transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

/* Table headers */
.smartgen-active-tools-table th {
    background-color: var(--primary-color);      /* Header background */
    color: #fff;                                 /* Text color */
}

/* Edit and delete buttons */
.smartgen-edit-button, .smartgen-delete-button {
    padding: 6px 10px;                           /* Padding */
    background-color: var(--primary-color);      /* Background color */
    border: none;                                /* No border */
    color: #fff;                                 /* Text color */
    border-radius: 5px;                          /* Rounded corners */
    cursor: pointer;                             /* Pointer cursor */
}

/* Delete button specific */
.smartgen-delete-button {
    background-color: #e74c3c;                   /* Red background */
}

/* ==========================================================
   Mobile Collapsible Format
   ========================================================== */

@media (max-width: 768px) {
    /* Hide desktop table on mobile */
    .smartgen-active-tools-table {
        display: none;
    }

    /* Tool list container */
    .smartgen-tool-list {
        list-style: none;                        /* Remove bullets */
        padding: 0;                              /* Remove padding */
        margin: 0;                               /* Remove margin */
    }

    /* Individual tool item */
    .tool-item {
        border-bottom: 1px solid var(--border-color); /* Bottom border */
        margin-bottom: 10px;                     /* Bottom margin */
        background-color: var(--form-background);/* Background color */
        border-radius: 8px;                      /* Rounded corners */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05); /* Shadow effect */
        padding: 12px 15px;                      /* Padding */
        transition: background-color 0.3s ease;   /* Smooth transition */
    }

    /* Hover effect for tool items */
    .tool-item:hover {
        background-color: var(--background-color); /* Change background */
    }

    /* Tool title */
    .tool-title {
        width: 100%;                             /* Full width */
        background-color: #f5f5f5;               /* Background color */
        border: 1px solid var(--border-color);   /* Border */
        border-radius: 8px;                      /* Rounded corners */
        padding: 12px 20px;                      /* Padding */
        text-align: center;                      /* Center text */
        cursor: pointer;                         /* Pointer cursor */
        font-size: 16px;                         /* Font size */
        font-weight: bold;                       /* Bold text */
        color: var(--text-color);                /* Text color */
        display: block;                          /* Block display */
        transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
        position: relative;                      /* Relative positioning */
    }

    /* Hover effect for tool titles */
    .tool-title:hover {
        color: var(--primary-color);             /* Change text color */
        background-color: #e6f7f5;               /* Change background */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);/* Enhanced shadow */
    }

    /* Expand/collapse icon */
    .tool-title::after {
        content: '\25BC';                        /* Down arrow */
        position: absolute;                      /* Absolute positioning */
        right: 20px;                             /* Right position */
        font-size: 14px;                         /* Font size */
        color: var(--text-color);                /* Icon color */
        transition: transform 0.3s ease;         /* Smooth rotation */
    }

    /* Expanded state icon */
    .tool-item.open .tool-title::after {
        transform: rotate(180deg);               /* Rotate arrow */
    }

    /* Collapsible content */
    .tool-details {
        display: none;                           /* Hidden by default */
        padding: 10px 15px;                      /* Padding */
        background-color: var(--background-color);/* Background color */
        border-radius: 5px;                      /* Rounded corners */
        margin-top: 10px;                        /* Top margin */
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Inset shadow */
    }

    /* Tool details paragraphs */
    .tool-details p {
        margin: 0;                               /* Remove margin */
        padding: 8px 0;                          /* Padding */
        font-size: 14px;                         /* Font size */
        line-height: 1.5;                        /* Line height */
    }

    /* Highlighted labels */
    .tool-details p strong {
        font-weight: bold;                       /* Bold text */
        color: var(--primary-color);             /* Text color */
    }

    /* Shortcode styling */
    .tool-details code {
        background-color: #f5f5f5;               /* Background color */
        font-weight: bold;                       /* Bold text */
        padding: 4px 6px;                        /* Padding */
        border-radius: 4px;                      /* Rounded corners */
        font-family: 'Courier New', Courier, monospace; /* Monospace font */
        font-size: 13px;                         /* Font size */
        color: #333;                             /* Text color */
        display: block;                          /* Block display */
        margin-top: 4px;                         /* Top margin */
        word-wrap: break-word;                   /* Wrap long words */
    }

    /* Collapsible animation */
    .tool-details {
        max-height: 0;                           /* Hidden height */
        overflow: hidden;                        /* Hide overflow */
        transition: max-height 0.3s ease-out;    /* Smooth expansion */
    }

    /* Expanded state */
    .tool-item.open .tool-details {
        display: block;                          /* Show content */
        max-height: 300px;                       /* Max height */
    }
}

/* ==========================================================
   Plugin Information Styles
   ========================================================== */

/* Plugin info container */
.smartgen-plugin-info {
    margin-top: 20px;                            /* Top margin */
    padding: 15px;                               /* Padding */
    background-color: #fef8e7;                   /* Background color */
    border-left: 6px solid #f39c12;              /* Left border */
    border-radius: 8px;                          /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);   /* Shadow effect */
    transition: background-color var(--transition-duration), box-shadow var(--transition-duration); /* Smooth transitions */
}

/* Plugin info header */
.smartgen-plugin-info h4 {
    margin: 0 0 5px 0;                           /* Margin */
    font-size: 16px;                             /* Font size */
    color: var(--text-color);                    /* Text color */
}

/* Plugin info paragraph */
.smartgen-plugin-info p {
    margin: 0 0 10px 0;                          /* Margin */
    font-size: 14px;                             /* Font size */
    color: var(--text-color);                    /* Text color */
}

/* Hover effect for plugin info */
.smartgen-plugin-info:hover {
    background-color: #fef4dc;                   /* Change background */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);  /* Enhanced shadow */
}

/* Changelog styling */
.smartgen-changelog {
    font-size: 13px;                             /* Font size */
    color: var(--text-color);                    /* Text color */
}

/* Changelog list */
.smartgen-changelog ul {
    padding-left: 20px;                          /* Left padding */
}

/* Changelog items */
.smartgen-changelog li {
    margin-bottom: 5px;                          /* Bottom margin */
}

        /*=============================================
=            SmartGen Import/Export Styles    =
=============================================*/


/* General Wrapper */
.wrap.smartgen-import-export-wrapper {
    font-family: var(--font-family);
}

/* Section Styling */
.smartgen-section {
    margin: 30px 20px;
}

.smartgen-section h2 {
    font-size: 20px;
    color: var(--text-color);
    margin-bottom: 10px;
}

.smartgen-section p {
    font-size: 14px;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

/* Form Styling */
.smartgen-section form {
    margin-top: 10px;
}

.smartgen-section input[type="file"] {
    font-size: 14px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--input-border-radius);
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--transition-duration), box-shadow var(--transition-duration);
}

.smartgen-section input[type="file"]:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(26, 188, 156, 0.3);
}

/* Button Styling */
.smartgen-section .button-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    text-decoration: none;
    text-shadow: none;
    box-shadow: var(--box-shadow);
    border-radius: var(--input-border-radius);
    padding: 8px 15px;
    transition: background-color var(--transition-duration), box-shadow var(--transition-duration);
}

.smartgen-section .button-primary:hover {
    background-color: var(--button-hover-color);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* Divider */
.smartgen-card hr {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 30px 0;
}

/* Success Notice Styling */
.notice.notice-success {
    border-left-color: var(--primary-color);
    background-color: #e0f7ec;
    color: var(--text-color);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: var(--box-shadow);
}

.notice.notice-success p {
    color: var(--text-color);
}

/* Skipped Tools Notification Styling */
.notice.notice-warning {
    background-color: #fff3cd;
    color: #856404;
    padding: 15px;
    border-left: 4px solid #856404;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.notice.notice-warning .notice-message {
    font-size: 16px; /* Larger font for the introductory message */
    font-weight: bold;
    color: #856404;
    margin-bottom: 8px; /* Spacing between the message and tool titles */
}

.notice.notice-warning p:last-child {
    color: #856404;
    font-weight: 600;
    display: inline; /* Skipped tools titles in a single line */
}

/* Ensure WordPress media uploader retains its default styles */
.media-modal .media-frame-title,
.media-modal .media-menu-item,
.media-modal .media-router {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    background-color: inherit;
    box-shadow: none;
    border: none;
}



/* Responsive Design */
@media (max-width: 768px) {
    .smartgen-card {
        padding: 15px;
    }

    .smartgen-section h2 {
        font-size: 18px;
    }

    .smartgen-section p {
        font-size: 13px;
    }

    .smartgen-section input[type="file"] {
        width: 100%;
    }
}



/*=============================================
=            End of SmartGen Styles           =
=============================================*/