/* * Custom styles for the Quick GPA Calculator Plugin.
 * All styles are scoped under '#qgc-plugin-wrapper' to prevent theme conflicts.
 * Version: 1.2.0
 */

/* * ========================================================================
 * BUTTON STYLE OVERRIDE (THE FIX)
 *
 * This new section forces the plugin's button styles to override
 * any conflicting styles from the active WordPress theme.
 * We use the button's ID for high specificity and !important
 * to ensure these rules always win.
 * ========================================================================
 */

/* --- Green Buttons (Add Course) --- */
#qgc-plugin-wrapper #qgc-add-course-btn,
#qgc-plugin-wrapper #qgc-add-cgpa-course-btn {
    background-color: #22c55e !important; /* Tailwind 'bg-green-500' */
    color: #ffffff !important;            /* Tailwind 'text-white' */
    font-weight: 600 !important;          /* Tailwind 'font-semibold' */
    border: none !important;              /* Reset theme borders */
    padding: 0.75rem 1.25rem !important;  /* Tailwind 'py-3 px-5' */
    border-radius: 0.5rem !important;     /* Tailwind 'rounded-lg' */
}

/* --- Blue Buttons (Calculate) --- */
#qgc-plugin-wrapper #qgc-calc-semester-btn,
#qgc-plugin-wrapper #qgc-calc-cumulative-btn {
    background-color: #2563EB !important; /* Tailwind 'bg-blue-600' */
    color: #ffffff !important;            /* Tailwind 'text-white' */
    font-weight: 700 !important;          /* Tailwind 'font-bold' */
    border: none !important;              /* Reset theme borders */
    padding: 0.75rem 1.25rem !important;  /* Tailwind 'py-3 px-5' */
    border-radius: 0.5rem !important;     /* Tailwind 'rounded-lg' */
}

/* --- Red Delete Buttons (in JS) --- */
#qgc-plugin-wrapper .remove-course-btn {
    background-color: #ffffff !important; /* Tailwind 'bg-white' */
    color: #EF4444 !important;            /* Tailwind 'text-red-500' */
    border: 1px solid #D1D5DB !important; /* Tailwind 'border border-gray-300' */
    padding: 0.75rem !important;          /* Tailwind 'p-3' */
    border-radius: 0.5rem !important;     /* Tailwind 'rounded-lg' */
    height: 50px !important;              /* Match height from JS */
}

/* --- Hover States --- */
#qgc-plugin-wrapper #qgc-add-course-btn:hover,
#qgc-plugin-wrapper #qgc-add-cgpa-course-btn:hover {
    background-color: #16a34a !important; /* Tailwind 'hover:bg-green-600' */
}

#qgc-plugin-wrapper #qgc-calc-semester-btn:hover,
#qgc-plugin-wrapper #qgc-calc-cumulative-btn:hover {
    background-color: #1D4ED8 !important; /* Tailwind 'hover:bg-blue-700' */
}

#qgc-plugin-wrapper .remove-course-btn:hover {
    color: #DC2626 !important;            /* Tailwind 'hover:text-red-700' */
}


/* * ========================================================================
 * ORIGINAL PLUGIN STYLES
 * ========================================================================
 */

/* Use Inter as the default font for the plugin wrapper */
#qgc-plugin-wrapper {
    font-family: 'Inter', sans-serif;
    /* This reset helps avoid theme conflicts */
    line-height: 1.5;
}

/* Ensure inputs inside the wrapper don't inherit weird theme styles */
#qgc-plugin-wrapper input,
#qgc-plugin-wrapper select,
#qgc-plugin-wrapper button {
    font-family: 'Inter', sans-serif;
    /* A basic reset for inputs/selects to fight theme styles */
    border: 1px solid #D1D5DB;
    padding: 0.75rem;
    margin: 0;
    font-size: 1rem;
    box-sizing: border-box;
}

/* Override the general button reset above for our specific plugin buttons */
#qgc-plugin-wrapper button#qgc-add-course-btn,
#qgc-plugin-wrapper button#qgc-add-cgpa-course-btn,
#qgc-plugin-wrapper button#qgc-calc-semester-btn,
#qgc-plugin-wrapper button#qgc-calc-cumulative-btn,
#qgc-plugin-wrapper button.remove-course-btn {
    padding: 0.75rem 1.25rem !important; /* Re-apply correct padding */
}


/* Hide number input arrows on Chrome, Safari, Edge, Opera */
#qgc-plugin-wrapper input::-webkit-outer-spin-button,
#qgc-plugin-wrapper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide number input arrows on Firefox */
#qgc-plugin-wrapper input[type=number] {
    -moz-appearance: textfield;
}

/* Custom style for the active tab */
#qgc-plugin-wrapper .tab-active {
    background-color: white;
    color: #2563EB; /* blue-600 */
    border-bottom: 2px solid #2563EB;
    font-weight: 600;
}

/* Custom style for the inactive tab */
#qgc-plugin-wrapper .tab-inactive {
    background-color: #F3F4F6; /* gray-100 */
    color: #4B5563; /* gray-600 */
    border-bottom: 2px solid transparent;
}