/* style.css */

/* General Body and Font Settings */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f0f2f5; /* Light gray background */
    min-height: 100vh; /* Ensure body takes full viewport height */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem; /* py-8 */
    padding-bottom: 2rem; /* py-8 */
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
}

/* Responsive Container Wrapper */
.container-wrapper {
    max-width: 100%; /* w-full */
    width: 100%;
    /* lg:max-w-7xl (1280px) */
    /* Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px) */
}
@media (min-width: 1024px) { /* Equivalent to lg:max-w-7xl */
    .container-wrapper {
        max-width: 1280px; /* Equivalent to max-w-7xl */
    }
}
@media (min-width: 640px) { /* Equivalent to sm:px-6 */
    body {
        padding-left: 1.5rem; /* sm:px-6 */
        padding-right: 1.5rem; /* sm:px-6 */
    }
}
@media (min-width: 1024px) { /* Equivalent to lg:px-8 */
    body {
        padding-left: 2rem; /* lg:px-8 */
        padding-right: 2rem; /* lg:px-8 */
    }
}


/* Header Section */
.header-section {
    text-align: center;
    margin-bottom: 3rem; /* mb-12 */
}
.header-section h1 {
    font-size: 3rem; /* text-5xl */
    line-height: 1.25; /* leading-tight */
    font-weight: 800; /* font-extrabold */
    color: #1f2937; /* text-gray-900 */
    margin-bottom: 1rem; /* mb-4 */
    letter-spacing: -0.05em; /* tracking-tight */
}
.header-section h1 .text-indigo {
    color: #4f46e5; /* text-indigo-600 */
}
.header-section p {
    font-size: 1.25rem; /* text-xl */
    color: #4b5563; /* text-gray-600 */
}

/* Search Bar Section */
.search-bar-wrapper {
    margin-bottom: 2.5rem; /* mb-10 */
    width: 100%; /* w-full */
    display: flex;
    justify-content: center;
}
.search-form {
    display: flex;
    flex-direction: column; /* flex-col */
    width: 100%; /* w-full */
    max-width: 42rem; /* max-w-2xl */
    background-color: #ffffff; /* bg-white */
    padding: 1rem; /* p-4 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
}
@media (min-width: 640px) { /* sm:flex-row */
    .search-form {
        flex-direction: row;
        align-items: center;
    }
}
.search-input {
    flex-grow: 1; /* flex-grow */
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem; /* py-2 */
    padding-left: 1.25rem; /* px-5 */
    padding-right: 1.25rem; /* px-5 */
    border-radius: 9999px; /* rounded-full */
    border: 1px solid #d1d5db; /* border border-gray-300 */
    outline: none; /* focus:outline-none */
    box-shadow: 0 0 #0000; /* focus:shadow-outline - default shadow, no real change */
    color: #374151; /* text-gray-700 */
    line-height: 1.5; /* leading-tight */
    font-size: 1.125rem; /* text-lg */
    margin-bottom: 0.75rem; /* mb-3 */
}
.search-input:focus {
    outline: 2px solid #6366f1; /* focus:ring-2 focus:ring-indigo-500 */
    border-color: transparent; /* focus:border-transparent */
}
@media (min-width: 640px) { /* sm:mb-0 sm:mr-3 */
    .search-input {
        margin-bottom: 0;
        margin-right: 0.75rem;
    }
}
.search-button {
    padding-left: 2rem; /* px-8 */
    padding-right: 2rem; /* px-8 */
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem; /* py-2 */
    background-color: #4f46e5; /* bg-indigo-600 */
    color: #ffffff; /* text-white */
    font-weight: 600; /* font-semibold */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
    transition-property: all; /* transition-all */
    transition-duration: 300ms; /* duration-300 */
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out (for transform) */
    transform: scale(1); /* Initial transform for hover */
    border: none;
    cursor: pointer;
}
.search-button:hover {
    background-color: #4338ca; /* hover:bg-indigo-700 */
    transform: scale(1.05); /* hover:scale-105 */
}


/* Domain Listings Grid */
.main-grid {
    width: auto; /* w-full */
    display: grid;
    gap: 2rem; /* gap-8 */
    grid-template-columns: repeat(1, minmax(auto)); /* sm:grid-cols-1 */
}
@media (min-width: 768px) { /* md:grid-cols-2 */
    .main-grid {
        grid-template-columns: repeat(2, minmax(auto));
    }
}
@media (min-width: 1024px) { /* lg:grid-cols-3 */
    .main-grid {
        grid-template-columns: repeat(3, minmax(auto));
    }
}
@media (min-width: 1280px) { /* xl:grid-cols-4 */
    .main-grid {
        grid-template-columns: repeat(4, minmax(auto));
    }
}
@media (min-width: 1440px) { /* xl:grid-cols-5 */
    .main-grid {
        grid-template-columns: repeat(5, minmax(auto));
    }
}
@media (min-width: 1800px) { /* xl:grid-cols-6 */
    .main-grid {
        grid-template-columns: repeat(6, minmax(auto));
    }
}


/* Individual Domain Card */
.domain-card {
    background-color: #ffffff; /* bg-white */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition-property: all; /* transition-all */
    transition-duration: 300ms; /* duration-300 */
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
    padding: 1.5rem; /* p-6 */
    display: flex;
    flex-direction: column; /* flex-col */
    justify-content: space-between; /* justify-between */
    min-height: 280px; /* Custom: minimum height to prevent layout shifts */
}
.domain-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
}

.domain-card-content { /* flex-grow flex flex-col */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.site-name-header {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    color: #4f46e5; /* text-indigo-700 */
    margin-bottom: 0.25rem; /* mb-1 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

.domain-name-display { /* h3 styles */
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #374151; /* text-gray-800 */
    margin-bottom: 0.75rem; /* mb-3 */
    word-break: break-all; /* break-words */
    display: flex; /* flex items-center */
    align-items: center;
}
.domain-name-display a {
    color: #374151; /* Default link color, as it inherits from parent */
    transition-property: color; /* transition-colors */
    transition-duration: 200ms; /* duration-200 */
}
.domain-name-display a:hover {
    color: #4338ca; /* hover:text-indigo-700 */
}

.ai-generated-icon {
    margin-left: 0.5rem; /* ml-2 */
    color: #10b981; /* text-green-500 */
}

.sales-pitch-wrapper {
    margin-bottom: 1rem; /* mb-4 */
}
.sales-pitch-text {
    color: #374151; /* text-gray-700 */
    font-size: 1rem; /* text-base */
    line-height: 1.5; /* leading-relaxed */
    word-wrap: break-word; /* Breaks long words if needed */
    text-align: left /* Ensure text is always left-aligned */
}

.card-footer-buttons { /* flex items-center justify-between mt-4 */
    display: flex;
    align-items: left;
    justify-content: space-between;
    margin-top: 1rem;
}

.price-display { /* span styles */
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    color: #047857; /* text-green-700 */
}

.buy-button {
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    background-image: linear-gradient(to right, #4f46e5, #8b5cf6); /* bg-gradient-to-r from-indigo-600 to-purple-700 */
    color: #ffffff; /* text-white */
    font-weight: 600; /* font-semibold */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition-property: all; /* transition-all */
    transition-duration: 300ms; /* duration-300 */
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out (for transform) */
    transform: scale(1); /* Initial transform for hover */
    border: none;
    cursor: pointer;
    text-decoration: none; /* remove underline for links */
}
.buy-button:hover {
    background-image: linear-gradient(to right, #4338ca, #7c3aed); /* hover:from-indigo-700 hover:to-purple-800 */
    transform: scale(1.05); /* hover:scale-105 */
}


/* Footer Section */
.footer-section {
    text-align: center;
    margin-top: 4rem; /* mt-16 */
    color: #6b7280; /* text-gray-500 */
    font-size: 0.875rem; /* text-sm */
}
.footer-section p {
    margin-top: 0.5rem; /* mt-2 for second paragraph */
}
.footer-link {
    color: #4f46e5; /* text-indigo-600 */
    text-decoration: none;
}
.footer-link:hover {
    text-decoration: underline; /* hover:underline */
}

/* ADMIN PANEL SPECIFIC STYLES */

/* Login Form */
.login-container { /* w-full max-w-md */
    width: 100%;
    max-width: 28rem; /* 448px */
    background-color: #ffffff; /* bg-white */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    padding: 2rem; /* p-8 */
}
.login-container h1 {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    text-align: center;
    color: #374151; /* text-gray-800 */
    margin-bottom: 1.5rem; /* mb-6 */
}
.form-group { /* mb-4 */
    margin-bottom: 1rem;
}
.form-label { /* block text-gray-700 text-sm font-bold mb-2 */
    display: block;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.form-input { /* shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-indigo-500 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow */
    -webkit-appearance: none; /* appearance-none */
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #d1d5db; /* border */
    border-radius: 0.5rem; /* rounded-lg */
    width: 100%;
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem; /* py-2 */
    padding-left: 0.75rem; /* px-3 */
    padding-right: 0.75rem; /* px-3 */
    color: #374151; /* text-gray-700 */
    line-height: 1.5; /* leading-tight */
    outline: none; /* focus:outline-none */
}
.form-input:focus {
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.5); /* focus:shadow-outline with indigo-500 equivalent */
    border-color: #6366f1; /* focus:border-indigo-500 */
}
.form-actions { /* flex items-center justify-between */
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.btn-primary { /* bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:shadow-outline transition duration-200 ease-in-out transform hover:scale-105 */
    background-color: #4f46e5; /* bg-indigo-600 */
    color: #ffffff; /* text-white */
    font-weight: 700; /* font-bold */
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem; /* py-2 */
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
    border-radius: 0.5rem; /* rounded-lg */
    outline: none; /* focus:outline-none */
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.5); /* focus:shadow-outline */
    transition-property: all; /* transition */
    transition-duration: 200ms; /* duration-200 */
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out (for transform) */
    transform: scale(1); /* Initial transform for hover */
    border: none;
    cursor: pointer;
}
.btn-primary:hover {
    background-color: #4338ca; /* hover:bg-indigo-700 */
    transform: scale(1.05); /* hover:scale-105 */
}
.link-secondary { /* inline-block align-baseline font-bold text-sm text-indigo-600 hover:text-indigo-800 */
    display: inline-block;
    vertical-align: baseline;
    font-weight: 700;
    font-size: 0.875rem; /* text-sm */
    color: #4f46e5; /* text-indigo-600 */
    text-decoration: none;
}
.link-secondary:hover {
    color: #3730a3; /* hover:text-indigo-800 */
}

/* Admin Dashboard General */
.admin-header { /* flex justify-between items-center mb-8 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem; /* mb-8 */
}
.admin-header h1 { /* text-4xl font-bold text-gray-900 */
    font-size: 2.25rem;
    font-weight: 700;
    color: #1f2937;
}
.admin-actions-menu { /* flex items-center space-x-4 */
    display: flex;
    align-items: center;
    gap: 1rem; /* space-x-4 */
}
.btn-logout { /* px-4 py-2 bg-red-600 text-white font-semibold rounded-lg hover:bg-red-700 transition duration-200 ease-in-out transform hover:scale-105 */
    padding: 0.5rem 1rem;
    background-color: #dc2626; /* bg-red-600 */
    color: #ffffff;
    font-weight: 600;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 200ms ease-in-out;
    transform: scale(1);
}
.btn-logout:hover {
    background-color: #b91c1c; /* hover:bg-red-700 */
    transform: scale(1.05);
}

/* Message Alerts */
.alert-success { /* bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4 */
    background-color: #d1fae5;
    border: 1px solid #34d399;
    color: #065f46;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    position: relative;
    margin-bottom: 1rem;
}
.alert-error { /* bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4 */
    background-color: #fee2e2;
    border: 1px solid #f87171;
    color: #b91c1c;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    position: relative;
    margin-bottom: 1rem;
}

/* Form Sections (Add Domain, CSV Upload) */
.form-section-card { /* bg-white rounded-xl shadow-lg p-6 mb-8 */
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    margin-bottom: 2rem;
}
.form-section-card h2 { /* text-2xl font-semibold text-gray-800 mb-4 */
    font-size: 1.5rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 1rem;
}
.form-grid { /* grid grid-cols-1 md:grid-cols-2 gap-4 */
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}
@media (min-width: 768px) { /* md:grid-cols-2 */
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.form-full-width { /* md:col-span-2 */
    grid-column: span 1 / span 1;
}
@media (min-width: 768px) {
    .form-full-width {
        grid-column: span 2 / span 2;
    }
}
.form-actions-right { /* flex justify-end */
    display: flex;
    justify-content: flex-end;
}
.btn-submit { /* px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 transition-all duration-200 ease-in-out transform hover:scale-105 */
    padding: 0.75rem 1.5rem;
    background-color: #4f46e5;
    color: #ffffff;
    font-weight: 600;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 200ms ease-in-out;
    transform: scale(1);
    border: none;
    cursor: pointer;
}
.btn-submit:hover {
    background-color: #4338ca;
    transform: scale(1.05);
}

/* CSV Upload Specifics */
.csv-upload-description { /* text-gray-600 mb-4 */
    color: #4b5563;
    margin-bottom: 1rem;
}
.csv-upload-form { /* flex flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* space-y-4 */
}
@media (min-width: 640px) { /* sm:flex-row */
    .csv-upload-form {
        flex-direction: row;
        gap: 0; /* reset gap */
        margin-right: 1rem; /* sm:space-x-4 equivalent, approximate */
    }
    .csv-upload-form > *:not(:last-child) {
        margin-right: 1rem;
    }
}
.file-input { /* block w-full sm:w-auto text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 */
    display: block;
    width: 100%;
    color: #6b7280; /* text-gray-500 */
    font-size: 0.875rem; /* text-sm */
}
@media (min-width: 640px) { /* sm:w-auto */
    .file-input {
        width: auto;
    }
}
.file-input::file-selector-button { /* Custom styling for the actual button part of file input */
    margin-right: 1rem; /* file:mr-4 */
    padding: 0.5rem 1rem; /* file:py-2 file:px-4 */
    border-radius: 9999px; /* file:rounded-full */
    border: none; /* file:border-0 */
    font-size: 0.875rem; /* file:text-sm */
    font-weight: 600; /* file:font-semibold */
    background-color: #eef2ff; /* file:bg-indigo-50 */
    color: #4f46e5; /* file:text-indigo-700 */
    cursor: pointer;
    transition: background-color 150ms ease-in-out;
}
.file-input::file-selector-button:hover {
    background-color: #e0e7ff; /* hover:file:bg-indigo-100 */
}
.btn-upload-csv { /* px-6 py-3 bg-purple-600 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 transition-all duration-200 ease-in-out transform hover:scale-105 */
    padding: 0.75rem 1.5rem;
    background-color: #9333ea; /* bg-purple-600 */
    color: #ffffff;
    font-weight: 600;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 200ms ease-in-out;
    transform: scale(1);
    border: none;
    cursor: pointer;
}
.btn-upload-csv:hover {
    background-color: #7e22ce; /* hover:bg-purple-700 */
    transform: scale(1.05);
}

/* Tables (Unapproved and Approved Domains) */
.table-section-card { /* bg-white rounded-xl shadow-lg p-6 */
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
}
.table-section-card h2 { /* text-2xl font-semibold text-gray-800 mb-4 */
    font-size: 1.5rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 1rem;
}
.table-section-card h2 .status-red {
    color: #ef4444; /* text-red-500 */
}
.table-actions-top-bottom { /* flex flex-wrap gap-4 mb-4 / mt-4 */
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
.table-actions-top-bottom.mt-4 {
    margin-top: 1rem;
    margin-bottom: 0; /* override mb-4 */
}

/* Table container */
.overflow-x-auto {
    overflow-x: auto; /* For responsive tables */
}
.data-table { /* min-w-full divide-y divide-gray-200 */
    min-width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #e5e7eb; /* divide-y border */
}
.data-table thead { /* bg-gray-50 */
    background-color: #f9fafb;
}
.data-table th { /* px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider */
    padding: 0.75rem 1.5rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.data-table tbody { /* bg-white divide-y divide-gray-200 */
    background-color: #ffffff;
}
.data-table tbody tr {
    border-top: 1px solid #e5e7eb; /* divide-y border */
}
.data-table td { /* px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 / text-gray-500 */
    padding: 1rem 1.5rem;
    white-space: nowrap;
    font-size: 0.875rem;
    color: #374151; /* Default to text-gray-900 */
}
.data-table td.text-gray-500 {
    color: #6b7280;
}
.data-table td.max-w-xs { /* max-w-xs overflow-hidden sales-pitch */
    max-width: 15rem; /* Approximate max-w-xs (20rem) equivalent */
    overflow: hidden;
}
.data-table td .break-all {
    word-break: break-all;
}
.data-table td .link-table { /* text-indigo-600 hover:underline */
    color: #4f46e5;
    text-decoration: none;
}
.data-table td .link-table:hover {
    text-decoration: underline;
}

/* Checkboxes */
input[type="checkbox"].styled-checkbox { /* rounded text-indigo-600 */
    border-radius: 0.25rem;
    color: #4f46e5;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #9ca3af; /* border-gray-400 */
    background-color: #ffffff;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
}
input[type="checkbox"].styled-checkbox:checked {
    background-color: #4f46e5;
    border-color: #4f46e5;
}
input[type="checkbox"].styled-checkbox:checked::before {
    content: '';
    display: block;
    width: 0.5rem;
    height: 0.25rem;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg);
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
}

/* Table Action Buttons */
.btn-table-action { /* text-right text-sm font-medium */
    text-align: right;
    font-size: 0.875rem;
    font-weight: 500;
}
.btn-table-action button { /* common styles for all table action buttons */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem; /* Adjust padding as needed */
    transition: color 200ms ease-in-out;
}
.btn-regenerate { /* text-blue-600 hover:text-blue-900 */
    color: #2563eb;
}
.btn-regenerate:hover {
    color: #1e40af;
}
.btn-approve { /* text-green-600 hover:text-green-900 */
    color: #16a34a;
}
.btn-approve:hover {
    color: #15803d;
}
.btn-reject { /* text-yellow-600 hover:text-yellow-900 */
    color: #ca8a04;
}
.btn-reject:hover {
    color: #a16207;
}

.btn-delete-bulk { /* px-5 py-2 bg-red-600 text-white font-semibold rounded-lg shadow-md hover:bg-red-700 transition */
    padding: 0.5rem 1.25rem;
    background-color: #dc2626;
    color: #ffffff;
    font-weight: 600;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 200ms ease-in-out;
    border: none;
    cursor: pointer;
}
.btn-delete-bulk:hover {
    background-color: #b91c1c;
}
.btn-approve-bulk { /* px-5 py-2 bg-green-600 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 transition */
    padding: 0.5rem 1.25rem;
    background-color: #22c55e;
    color: #ffffff;
    font-weight: 600;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 200ms ease-in-out;
    border: none;
    cursor: pointer;
}
.btn-approve-bulk:hover {
    background-color: #16a34a;
}
.btn-reject-bulk { /* px-5 py-2 bg-yellow-600 text-white font-semibold rounded-lg shadow-md hover:bg-yellow-700 transition */
    padding: 0.5rem 1.25rem;
    background-color: #eab308;
    color: #ffffff;
    font-weight: 600;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 200ms ease-in-out;
    border: none;
    cursor: pointer;
}
.btn-reject-bulk:hover {
    background-color: #d97706;
}

/* Editable Cell */
.editable-cell {
    cursor: pointer;
    min-width: 80px; /* Ensure enough space for editing */
}
.editable-cell.editing {
    padding: 0;
}
.editable-cell input[type="text"],
.editable-cell textarea,
.editable-cell input[type="url"] {
    width: 100%;
    border: 1px solid #a0aec0; /* Tailwind gray-400 */
    border-radius: 0.375rem; /* Tailwind rounded-md */
    padding: 0.5rem;
    box-sizing: border-box;
    font-size: 0.875rem; /* Tailwind text-sm */
    line-height: 1.25rem;
}
.editable-cell textarea {
    min-height: 80px; /* Adjust height for sales pitch */
    resize: vertical;
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    justify-content: center;
    align-items: center;
}
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    position: relative;
}
.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
}
.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.modal-content h3 { /* text-xl font-semibold mb-4 */
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.modal-content p { /* mb-6 */
    margin-bottom: 1.5rem;
}
.modal-actions { /* flex justify-end space-x-4 */
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}
.btn-modal-cancel { /* px-4 py-2 bg-gray-300 rounded-lg hover:bg-gray-400 transition */
    padding: 0.5rem 1rem;
    background-color: #d1d5db;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 200ms ease-in-out;
}
.btn-modal-cancel:hover {
    background-color: #9ca3af;
}
.btn-modal-confirm { /* px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition */
    padding: 0.5rem 1rem;
    background-color: #dc2626;
    color: #ffffff;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 200ms ease-in-out;
}
.btn-modal-confirm:hover {
    background-color: #b91c1c;
}
.modal-spinner { /* flex justify-center mb-4 */
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}
.modal-spinner svg { /* animate-spin -ml-1 mr-3 h-8 w-8 text-indigo-600 */
    animation: spin 1s linear infinite;
    margin-left: -0.25rem;
    margin-right: 0.75rem;
    height: 2rem;
    width: 2rem;
    color: #4f46e5;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.modal-close-button { /* hidden */
    display: none;
}
.text-center { text-align: center; }

/* Sortable Headers */
.sortable-header {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.5rem; /* Make space for the arrow icon */
}
.sortable-header::after {
    content: '';
    position: absolute;
    right: 0.75rem; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    opacity: 0.4;
}
.sortable-header.asc::after {
    border-bottom: 5px solid currentColor;
    opacity: 1;
}
.sortable-header.desc::after {
    border-top: 5px solid currentColor;
    opacity: 1;
}
/* Unapproved AI generated icon in table header */
.sortable-header .fa-robot {
    margin-left: 0.25rem;
    color: #10B981;
}