@tailwind base;
@tailwind components;
@tailwind utilities;

/* Full width layout */
@layer base {
    #cpepai-app {
        width: 100% !important;
        max-width: none !important;
    }
}

/* Custom WordPress-specific styles */
@layer components {
    /* Main App Layout */
    .cpepai-app {
        @apply w-full max-w-none;
    }

    .cpepai-container {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8;
    }

    .cpepai-header {
        @apply mb-8;
    }

    .cpepai-header h1 {
        @apply text-3xl font-bold text-gray-900 mb-2;
    }

    .cpepai-header p {
        @apply text-lg text-gray-600;
    }

    .cpepai-main {
        @apply space-y-6;
    }

    .cpepai-user-info {
        @apply bg-blue-50 border border-blue-200 rounded-lg p-4;
    }

    .cpepai-form-buttons {
        @apply flex flex-wrap gap-3;
    }

    .cpepai-app-loading {
        @apply flex items-center justify-center p-8 text-gray-600;
    }

    .cpepai-app-spinner {
        @apply w-5 h-5 border-2 border-gray-200 border-t-blue-600 rounded-full animate-spin mr-2;
    }

    .cpepai-app-error {
        @apply bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-md;
    }

    /* Legacy button class - updated to match new secondary color scheme */
    .cpepai-button-secondary {
        background-color: #f6f7ff;
        color: #080081;
        border-color: #c7c9e8;
        @apply px-4 py-2 rounded transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
    }
    .cpepai-button-secondary:hover:not(:disabled) {
        background-color: #eef0ff;
    }
    .cpepai-button-secondary:focus {
        --tw-ring-color: #080081;
    }

    .cpepai-card {
        @apply bg-white border border-wp-border rounded-lg shadow-sm;
    }

    .cpepai-input {
        @apply w-full px-3 py-2 border border-wp-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary;
        outline: none !important;
        box-shadow: none !important;
    }

    .cpepai-error {
        @apply bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-md;
    }

    .cpepai-success {
        @apply bg-blue-50 border border-blue-200 text-blue-800 px-4 py-3 rounded-md;
    }

    .cpepai-loading {
        @apply flex items-center justify-center p-8 text-wp-gray;
    }

    .cpepai-spinner {
        @apply w-5 h-5 border-2 border-gray-200 border-t-primary rounded-full animate-spin mr-2;
    }

    /* Sidebar Styles */
    .cpepai-sidebar-backdrop {
        @apply fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300;
    }

    .cpepai-sidebar {
        @apply fixed right-0 w-[500px] bg-white shadow-xl z-50 transform transition-transform duration-300 ease-in-out;
        @apply flex flex-col;
        top: 32px;
        height: calc(100vh - 32px);
        min-height: calc(100vh - 32px);
    }

    /* Account for WordPress admin bar on mobile */
    @media screen and (max-width: 782px) {
        .cpepai-sidebar {
            top: 46px;
            height: calc(100vh - 46px);
            min-height: calc(100vh - 46px);
        }
    }

    .cpepai-sidebar-header {
        @apply flex items-center justify-between p-6 border-b border-gray-200 bg-gray-50;
    }

    .cpepai-sidebar-title {
        @apply text-lg font-semibold text-gray-900 m-0;
    }

    .cpepai-sidebar-close {
        @apply p-1 text-gray-400 hover:text-gray-600 transition-colors duration-200;
    }

    .cpepai-sidebar-content {
        @apply flex-1 overflow-y-auto p-6;
    }

    .cpepai-form {
        @apply space-y-6;
    }

    .cpepai-form .cpepai-form-group {
        @apply mb-6;
    }

    .cpepai-form-group {
        @apply space-y-2;
    }

    .cpepai-form-label {
        @apply block text-sm font-medium text-gray-700;
    }

    .cpepai-form-input {
        @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary;
        outline: none !important;
        box-shadow: none !important;
    }

    .cpepai-form-textarea {
        @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary;
        resize: vertical;
        outline: none !important;
        box-shadow: none !important;
    }

    .cpepai-form-input--error {
        @apply border-red-300 focus:ring-red-500 focus:border-red-500;
    }

    .cpepai-form-textarea--error {
        @apply border-red-300 focus:ring-red-500 focus:border-red-500;
    }

    .cpepai-form-error {
        @apply text-sm text-red-600 mt-1;
    }

    .cpepai-form-select {
        @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary;
        outline: none !important;
        box-shadow: none !important;
    }

    .cpepai-form-actions {
        @apply flex justify-between space-x-3 pt-6 border-t border-gray-200;
    }

    .cpepai-button {
        @apply px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 border;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Primary (filled - only for the main CTA) */
    /* BG: #080081, Text: #FFFFFF, Hover BG: #1A16A6 */
    .cpepai-button--primary {
        background-color: #080081;
        color: #ffffff;
        border-color: #080081;
    }
    .cpepai-button--primary:hover:not(:disabled) {
        background-color: #1a16a6;
        border-color: #1a16a6;
    }
    .cpepai-button--primary:focus {
        --tw-ring-color: #080081;
    }

    /* Secondary (light - for "Schedule manually", etc.) */
    /* BG: #F6F7FF, Text: #080081, Border: #C7C9E8, Hover BG: #EEF0FF */
    .cpepai-button--secondary {
        background-color: #f6f7ff;
        color: #080081;
        border-color: #c7c9e8;
    }
    .cpepai-button--secondary:hover:not(:disabled) {
        background-color: #eef0ff;
    }
    .cpepai-button--secondary:focus {
        --tw-ring-color: #080081;
    }

    /* Tertiary (ghost - low priority actions) */
    /* BG: transparent, Text: #080081, Hover BG: #F2F3FF */
    .cpepai-button--tertiary {
        background-color: transparent;
        color: #080081;
        border-color: transparent;
    }
    .cpepai-button--tertiary:hover:not(:disabled) {
        background-color: #f2f3ff;
    }
    .cpepai-button--tertiary:focus {
        --tw-ring-color: #080081;
    }

    /* Danger (delete) */
    /* BG: #FEE2E2, Text: #991B1B, Hover BG: #FECACA */
    .cpepai-button--danger {
        background-color: #fee2e2;
        color: #991b1b;
        border-color: #fee2e2;
    }
    .cpepai-button--danger:hover:not(:disabled) {
        background-color: #fecaca;
        border-color: #fecaca;
    }
    .cpepai-button--danger:focus {
        --tw-ring-color: #991b1b;
    }

    /* Backward compatibility classes (without double dash) */
    .cpepai-button-danger {
        background-color: #fee2e2;
        color: #991b1b;
        border-color: #fee2e2;
    }
    .cpepai-button-danger:hover:not(:disabled) {
        background-color: #fecaca;
        border-color: #fecaca;
    }
    .cpepai-button-danger:focus {
        --tw-ring-color: #991b1b;
    }

    .cpepai-button-secondary {
        background-color: #f6f7ff;
        color: #080081;
        border-color: #c7c9e8;
    }
    .cpepai-button-secondary:hover:not(:disabled) {
        background-color: #eef0ff;
    }
    .cpepai-button-secondary:focus {
        --tw-ring-color: #080081;
    }

    .cpepai-delete-link {
        @apply text-sm text-red-600 hover:text-red-800 transition-colors duration-200 mt-4 inline-block;
    }

    .cpepai-button:disabled {
        @apply opacity-50 cursor-not-allowed;
    }
}

/* Custom animations */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Running light effect for processing status */
@keyframes runningLight {
    0% {
        background-position: 300% center;
    }
    100% {
        background-position: -300% center;
    }
}

.cpepai-processing-light {
    background: linear-gradient(
        90deg,
        #1e40af 0%,
        #1e40af 20%,
        #3b82f6 40%,
        #60a5fa 50%,
        #93c5fd 55%,
        #60a5fa 60%,
        #3b82f6 80%,
        #1e40af 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: runningLight 6s linear infinite;
    display: inline-block;
    font-weight: 600;
}

/* Slide animations for generated content section */
@keyframes slideDown {
    from {
        max-height: 0;
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        max-height: 1000px;
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        max-height: 1000px;
        opacity: 1;
        transform: translateY(0);
    }
    to {
        max-height: 0;
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Toast notification animation */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

.animate-slide-in-up {
    animation: slideInUp 0.3s ease-out;
}

/* Tooltip animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

.animate-fade-in {
    animation: fadeIn 0.2s ease-out;
}

.animate-fade-out {
    animation: fadeOut 0.2s ease-in;
}

/* Tooltip arrows using pseudo-elements - scoped only to tooltip-arrow-* classes */
.tooltip-arrow-top::before,
.tooltip-arrow-top::after,
.tooltip-arrow-bottom::before,
.tooltip-arrow-bottom::after,
.tooltip-arrow-left::before,
.tooltip-arrow-left::after,
.tooltip-arrow-right::before,
.tooltip-arrow-right::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Top arrow */
.tooltip-arrow-top::before {
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #d1d5db;
}

.tooltip-arrow-top::after {
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #ffffff;
}

/* Bottom arrow */
.tooltip-arrow-bottom::before {
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #d1d5db;
}

.tooltip-arrow-bottom::after {
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ffffff;
}

/* Left arrow */
.tooltip-arrow-left::before {
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 9px solid #d1d5db;
}

.tooltip-arrow-left::after {
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #ffffff;
}

/* Right arrow */
.tooltip-arrow-right::before {
    left: -9px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 9px solid #d1d5db;
}

.tooltip-arrow-right::after {
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #ffffff;
}

.cpepai-generated-content-section {
    overflow: hidden;
    transition:
        max-height 0.3s ease-in-out,
        opacity 0.3s ease-in-out,
        transform 0.3s ease-in-out;
}

.cpepai-generated-content-section.slide-down {
    animation: slideDown 0.3s ease-in-out forwards;
}

.cpepai-generated-content-section.slide-up {
    animation: slideUp 0.3s ease-in-out forwards;
}

.cpepai-generated-content-section.hidden {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
}

/* Sidebar animations */
.cpepai-sidebar {
    transform: translateX(100%);
}

.cpepai-sidebar.open {
    transform: translateX(0);
}

.cpepai-sidebar-backdrop {
    opacity: 0;
}

.cpepai-sidebar-backdrop.open {
    opacity: 1;
}

/* Posts List Styles */
.cpepai-posts-list {
    @apply max-h-48 overflow-y-auto border border-wp-border rounded-md bg-gray-50;
}

.cpepai-post-item {
    @apply p-3 border-b border-wp-border last:border-b-0 hover:bg-white transition-colors duration-200;
}

.cpepai-post-title {
    @apply font-medium text-sm text-gray-900 mb-1 line-clamp-2;
}

.cpepai-post-meta {
    @apply flex items-center justify-between text-xs text-gray-500;
}

.cpepai-post-status {
    @apply px-2 py-1 rounded-full text-xs font-medium;
}

.cpepai-post-status.publish {
    @apply bg-green-100 text-green-800;
}

.cpepai-post-status.draft {
    @apply bg-yellow-100 text-yellow-800;
}

.cpepai-post-status.private {
    @apply bg-gray-100 text-gray-800;
}

.cpepai-post-date {
    @apply text-gray-400;
}

/* Keyword Input Styles */
.cpepai-keyword-input {
    @apply relative;
}

.cpepai-keyword-tags {
    @apply flex flex-wrap gap-2 p-2 border border-gray-300 rounded-md min-h-[42px] focus-within:ring-2 focus-within:ring-primary focus-within:border-primary;
}

.cpepai-keyword-tag {
    @apply flex items-center bg-primary bg-opacity-10 text-primary px-2 py-1 rounded-md text-sm;
}

.cpepai-keyword-remove {
    @apply ml-1 text-primary hover:text-primary-dark focus:outline-none;
}

.cpepai-keyword-input-field {
    @apply flex-1 min-w-[120px] outline-none border-none bg-transparent text-sm;
}

.cpepai-keyword-suggestions {
    @apply absolute z-10 mt-1 w-full bg-white border border-gray-200 rounded-md shadow-lg max-h-60 overflow-y-auto;
}

.cpepai-keyword-suggestion {
    @apply w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none cursor-pointer;
}

/* Number input styles */
.react-numeric-input b {
    position: absolute;
    right: 2px;
    width: 2.5em;
    border-color: #d1d5db;
    cursor: pointer;
}

.react-numeric-input b:hover {
    background-color: #e5e7eb !important;
}

.react-numeric-input b:active {
    background-color: #d1d5db !important;
}

.react-numeric-input input {
    @apply w-full h-12 px-3 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary;
    outline: none !important;
    box-shadow: none !important;
}

/* Generation Modal NumericInput Styles */
.cpepai-generation-modal .react-numeric-input {
    width: 100%;
    height: 48px;
}

@media (min-width: 768px) {
    .cpepai-generation-modal .react-numeric-input {
        width: auto;
    }
}

.cpepai-generation-modal .react-numeric-input input {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
    outline: none;
}

.cpepai-generation-modal .react-numeric-input input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.cpepai-generation-modal .react-numeric-input b {
    background: #f3f4f6;
    border-color: #d1d5db;
    height: 24px;
}

.cpepai-generation-modal .react-numeric-input b:hover {
    background: #e5e7eb;
}

.cpepai-generation-modal .react-numeric-input b:active {
    background: #d1d5db;
}

/* React DatePicker custom styles */
.react-datepicker-wrapper {
    @apply w-full;
}

.react-datepicker-wrapper.inline-block {
    width: auto !important;
    display: inline-block !important;
}

.react-datepicker {
    @apply border border-gray-200 rounded-lg shadow-lg font-sans !important;
    z-index: 1000 !important;
}

.react-datepicker-popper {
    z-index: 1000 !important;
}

.react-datepicker__input-container input {
    min-width: 140px !important;
}

.react-datepicker__header {
    @apply bg-gray-50 border-b border-gray-200 rounded-t-lg !important;
}

.react-datepicker__current-month {
    @apply text-sm font-medium text-gray-900 py-2 !important;
}

.react-datepicker__day-name {
    @apply text-xs text-gray-500 !important;
}

.react-datepicker__day {
    @apply text-sm text-gray-700 hover:bg-gray-100 rounded-md !important;
}

.react-datepicker__day--selected {
    @apply bg-primary text-white hover:bg-primary-dark !important;
}

.react-datepicker__day--keyboard-selected {
    @apply bg-primary bg-opacity-10 text-primary !important;
}

.react-datepicker__day--today {
    @apply font-bold !important;
}

.react-datepicker__day--disabled {
    @apply text-gray-300 cursor-not-allowed hover:bg-transparent !important;
}

.react-datepicker__navigation {
    @apply top-3 !important;
}

.react-datepicker__navigation-icon::before {
    @apply border-gray-400 !important;
}

.react-datepicker__navigation:hover .react-datepicker__navigation-icon::before {
    @apply border-gray-600 !important;
}

.react-datepicker__month {
    @apply m-2 !important;
}

.react-datepicker__week {
    @apply flex !important;
}

/* Remove all outlines from form elements to override WordPress styles */
input,
textarea,
select,
button,
a {
    outline: none !important;
    box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus,
button:focus,
a:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Specific overrides for WordPress admin styles */
#cpepai-app input,
#cpepai-app textarea,
#cpepai-app select,
#cpepai-app button,
#cpepai-app a {
    outline: none !important;
    box-shadow: none !important;
}

#cpepai-app input:focus,
#cpepai-app textarea:focus,
#cpepai-app select:focus,
#cpepai-app button:focus,
#cpepai-app a:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* React Select custom styles */
.react-select-container {
    @apply w-full;
}

.react-select__control {
    @apply min-h-[48px] border border-gray-300 rounded-md;
    outline: none !important;
    box-shadow: none !important;
}

.react-select__control--is-focused {
    @apply border-primary ring-2 ring-primary ring-opacity-50;
    outline: none !important;
    box-shadow: none !important;
}

.react-select__value-container {
    @apply px-3 py-2;
}

.react-select__input-container {
    @apply m-0;
}

.react-select__indicator-separator {
    @apply hidden;
}

.react-select__dropdown-indicator {
    @apply text-gray-400 hover:text-gray-600;
}

.react-select__option {
    @apply px-4 py-3 text-sm;
}

.react-select__option--is-selected {
    @apply bg-primary text-white;
}

.react-select__option--is-focused {
    @apply bg-gray-100;
}

.react-select__menu {
    @apply border border-gray-200 rounded-md shadow-lg;
}

/* Generation Modal React Select Styles */
.cpepai-generation-modal .react-select__control {
    min-height: 48px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: none;
}

.cpepai-generation-modal .react-select__control--is-focused {
    border: 1px solid #3b82f6;
    box-shadow: 0 0 0 1px #3b82f6;
}

.cpepai-generation-modal .react-select__control:hover {
    border: 1px solid #3b82f6;
}

.cpepai-generation-modal .react-select__value-container {
    padding: 0 12px;
}

.cpepai-generation-modal .react-select__input-container {
    margin: 0;
}

.cpepai-generation-modal .react-select__indicator-separator {
    display: none;
}

.cpepai-generation-modal .react-select__indicators {
    padding-right: 12px;
}

.cpepai-generation-modal .react-select__dropdown-indicator {
    color: #6b7280;
}

.cpepai-generation-modal .react-select__dropdown-indicator:hover {
    color: #374151;
}

.cpepai-generation-modal .react-select__option {
    background-color: white;
    color: #374151;
    padding: 12px 16px;
}

.cpepai-generation-modal .react-select__option--is-selected {
    background-color: #3b82f6;
    color: white;
}

.cpepai-generation-modal .react-select__option--is-focused {
    background-color: #f3f4f6;
}

.cpepai-generation-modal .react-select__option:hover {
    background-color: #f3f4f6;
}

.cpepai-generation-modal .react-select__option--is-selected:hover {
    background-color: #3b82f6;
}

.cpepai-generation-modal .react-select__menu {
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Radio button and checkbox alignment fixes for onboarding */
#cpepai-app label.flex input[type='radio'],
#cpepai-app label.flex input[type='checkbox'] {
    margin-top: 0.125rem;
    align-self: flex-start;
}

#cpepai-app label.flex:has(input[type='radio']) > div:first-of-type,
#cpepai-app label.flex:has(input[type='checkbox']) > span:first-of-type {
    padding-top: 0;
    margin-top: 0;
}

/* Fallback for browsers without :has() support */
#cpepai-app .cpepai-onboarding-radio-label,
#cpepai-app .cpepai-onboarding-checkbox-label {
    align-items: flex-start;
}

#cpepai-app .cpepai-onboarding-radio-label input[type='radio'],
#cpepai-app .cpepai-onboarding-checkbox-label input[type='checkbox'] {
    margin-top: 0.125rem;
    align-self: flex-start;
}

#cpepai-app .cpepai-onboarding-radio-label > div,
#cpepai-app .cpepai-onboarding-checkbox-label > span {
    padding-top: 0;
    margin-top: 0;
}

/* React Big Calendar Styles */
.calendar-view-container {
    @apply w-full;
}

.rbc-calendar {
    @apply font-sans;
}

.rbc-header {
    @apply border-b border-gray-200 py-2 text-sm font-medium text-gray-700;
}

.rbc-today {
    @apply bg-blue-50;
}

.rbc-off-range-bg {
    @apply bg-gray-50;
}

.rbc-event {
    @apply rounded px-2 py-1 text-xs font-medium cursor-pointer;
}

.rbc-event:focus {
    @apply outline-none ring-2 ring-offset-2 ring-primary;
}

.rbc-event-content {
    @apply overflow-hidden text-ellipsis whitespace-nowrap;
}

.rbc-toolbar {
    @apply mb-4 flex flex-wrap items-center justify-between gap-2;
}

.rbc-toolbar button {
    @apply px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md transition-colors duration-200;
    outline: none !important;
    box-shadow: none !important;
}

.rbc-toolbar button:hover {
    @apply bg-gray-50 border-gray-400;
}

.rbc-toolbar button:active,
.rbc-toolbar button.rbc-active {
    @apply bg-primary text-white border-primary;
}

.rbc-toolbar button:focus {
    @apply ring-2 ring-offset-2 ring-primary;
}

.rbc-toolbar-label {
    @apply text-base font-semibold text-gray-900 px-4;
}

.rbc-month-view {
    @apply border border-gray-200 rounded-lg overflow-hidden;
}

.rbc-month-row {
    @apply border-b border-gray-200;
}

.rbc-day-bg {
    @apply border-r border-gray-200;
}

.rbc-day-bg:last-child {
    @apply border-r-0;
}

.rbc-date-cell {
    @apply text-right pr-2 py-1;
}

.rbc-date-cell > a {
    @apply text-gray-700 hover:text-primary;
}

.rbc-day-slot .rbc-time-slot {
    @apply border-t border-gray-100;
}

.rbc-time-header-content {
    @apply border-l border-gray-200;
}

.rbc-time-content {
    @apply border-t border-gray-200;
}

.rbc-time-slot {
    @apply text-xs text-gray-500;
}

.rbc-agenda-view table {
    @apply w-full border-collapse;
}

.rbc-agenda-view table thead {
    @apply bg-gray-50;
}

.rbc-agenda-view table thead th {
    @apply px-4 py-2 text-left text-sm font-medium text-gray-700 border-b border-gray-200;
}

.rbc-agenda-view table tbody td {
    @apply px-4 py-2 text-sm text-gray-900 border-b border-gray-100;
}

.rbc-agenda-date-cell,
.rbc-agenda-time-cell {
    @apply whitespace-nowrap;
}

.rbc-agenda-event-cell {
    @apply w-full;
}

.rbc-popup {
    @apply bg-white border border-gray-200 rounded-lg shadow-lg p-4 z-50;
}

.rbc-popup-header {
    @apply mb-2 text-sm font-semibold text-gray-900;
}

.rbc-popup-content {
    @apply text-sm text-gray-700;
}

.rbc-overlay {
    @apply bg-white border border-gray-200 rounded-lg shadow-lg p-3 z-50;
}

.rbc-overlay-header {
    @apply mb-2 text-sm font-semibold text-gray-900 border-b border-gray-200 pb-2;
}