/* App-specific styles with Theme Support */

/* =============================================================================
   BUTTON STYLES
   ============================================================================= */

.btn-primary {
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(0 176 80 / 1);
    background-color: rgb(0 176 80 / var(--tw-bg-opacity, 1));
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / 1);
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    animation-duration: 300ms;
}

[data-theme="light"] .btn-primary {
    color: var(--text-primary);
}

.btn-primary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(0 150 67 / 1);
    background-color: rgb(0 150 67 / var(--tw-bg-opacity, 1));
}

.btn-primary {
    box-shadow: 0 0 20px rgba(0, 176, 80, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 0 30px rgba(0, 176, 80, 0.5);
}

.btn-secondary {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    border-radius: 9999px;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    --tw-backdrop-blur: blur(12px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    animation-duration: 300ms;
}

.btn-secondary:hover {
    opacity: 0.8;
}

.btn-outline {
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(0 176 80 / 1);
    border-color: rgb(0 176 80 / var(--tw-border-opacity, 1));
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    --tw-text-opacity: 1;
    color: rgb(0 176 80 / 1);
    color: rgb(0 176 80 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    animation-duration: 300ms;
}

.btn-outline:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(0 176 80 / 1);
    background-color: rgb(0 176 80 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / 1);
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* =============================================================================
   CARD STYLES - Theme Aware
   ============================================================================= */

.marketing-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    padding: 2rem;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    animation-duration: 300ms;
}

.marketing-card:hover {
    border-color: rgba(0, 176, 80, 0.5);
}

.dashboard-card {
    background-color: var(--bg-card-hover);
    border: 1px solid var(--border-light);
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}

/* Light theme override for dashboard cards */
[data-theme="light"] .dashboard-card {
    background-color: var(--bg-card);
    border-color: var(--border-default);
}

/* =============================================================================
   INPUT STYLES
   ============================================================================= */

.input-default {
    background-color: var(--bg-input);
    border: 1px solid var(--border-medium);
    color: var(--text-primary);
    border-radius: var(--radius);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    animation-duration: 300ms;
}

.input-default::placeholder {
    color: var(--text-muted);
}

.input-default:focus {
    --tw-border-opacity: 1;
    border-color: rgb(0 176 80 / 1);
    border-color: rgb(0 176 80 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(0 176 80 / var(--tw-ring-opacity, 1));
}

/* =============================================================================
   NAVIGATION
   ============================================================================= */

.nav-link {
    color: var(--text-secondary);
    position: relative;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    animation-duration: 200ms;
}

.nav-link:hover {
    opacity: 1;
}

[data-theme="light"] .nav-link {
    color: var(--text-secondary);
}

[data-theme="light"] .nav-link:hover {
    color: var(--text-primary);
}

.nav-link.active {
    --tw-text-opacity: 1;
    color: rgb(0 176 80 / 1);
    color: rgb(0 176 80 / var(--tw-text-opacity, 1));
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 0.125rem;
    width: 0px;
    --tw-bg-opacity: 1;
    background-color: rgb(0 176 80 / 1);
    background-color: rgb(0 176 80 / var(--tw-bg-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    animation-duration: 300ms;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* =============================================================================
   SIDEBAR STYLES
   ============================================================================= */

.admin-sidebar {
    background-color: var(--bg-sidebar) !important;
    border-color: var(--border-default) !important;
}

.admin-header {
    background-color: var(--bg-header) !important;
    border-color: var(--border-default) !important;
}

.admin-mobile-nav {
    background-color: var(--bg-sidebar) !important;
    border-color: var(--border-default) !important;
}

.admin-wrapper {
    background-color: var(--bg-page) !important;
}

.sidebar-link {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: var(--radius);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    animation-duration: 200ms;
}

.sidebar-link:hover {
    color: var(--text-primary);
    background-color: var(--border-light);
}

.sidebar-link.active {
    border-left-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(0 176 80 / 1);
    border-color: rgb(0 176 80 / var(--tw-border-opacity, 1));
    background-color: rgb(0 176 80 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(0 176 80 / 1);
    color: rgb(0 176 80 / var(--tw-text-opacity, 1));
}

/* =============================================================================
   TABLE STYLES
   ============================================================================= */

.table-header {
    background-color: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}

.table-row {
    border-bottom: 1px solid var(--border-light);
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    animation-duration: 200ms;
}

.table-row:hover {
    background-color: var(--border-light);
}

/* =============================================================================
   BADGE STYLES - Theme Aware
   ============================================================================= */

.badge {
    border-radius: 9999px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
}

.badge-new {
    background-color: var(--badge-blue-bg);
    color: var(--badge-blue-text);
}

.badge-contacted {
    background-color: var(--badge-yellow-bg);
    color: var(--badge-yellow-text);
}

.badge-qualified {
    background-color: var(--badge-purple-bg);
    color: var(--badge-purple-text);
}

.badge-converted {
    background-color: rgb(0 176 80 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(0 176 80 / 1);
    color: rgb(0 176 80 / var(--tw-text-opacity, 1));
}

.badge-lost {
    background-color: var(--badge-red-bg);
    color: var(--badge-red-text);
}

/* =============================================================================
   TOOLTIP
   ============================================================================= */

.tooltip {
    background-color: var(--bg-tooltip);
    color: var(--text-primary);
    position: absolute;
    z-index: 50;
    border-radius: var(--radius);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    box-shadow: var(--shadow-lg);
}

/* Light theme tooltip override - keep dark for readability */
[data-theme="light"] .tooltip {
    background-color: #1e293b;
    color: #ffffff;
}

/* =============================================================================
   MODAL OVERLAY
   ============================================================================= */

.modal-overlay {
    position: fixed;
    inset: 0px;
    z-index: 50;
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    background-color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .modal-overlay {
    background-color: rgba(0, 0, 0, 0.4);
}

/* =============================================================================
   PROGRESS BAR
   ============================================================================= */

.progress-bar {
    height: 0.5rem;
    overflow: hidden;
    border-radius: 9999px;
    background-color: var(--border-medium);
}

.progress-bar-fill {
    height: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(0 176 80 / 1);
    background-color: rgb(0 176 80 / var(--tw-bg-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    animation-duration: 500ms;
}

/* =============================================================================
   SERVICE CARD ICONS
   ============================================================================= */

.service-icon {
    display: flex;
    height: 3.5rem;
    width: 3.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background-color: rgb(0 176 80 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(0 176 80 / 1);
    color: rgb(0 176 80 / var(--tw-text-opacity, 1));
}

/* =============================================================================
   STATS CARD
   ============================================================================= */

.stats-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: 1rem;
    padding: 1.5rem;
}

.stats-value {
    color: var(--text-primary);
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
}

.stats-label {
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* =============================================================================
   FORM LABEL
   ============================================================================= */

.form-label {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}

/* =============================================================================
   SCORE INDICATORS
   ============================================================================= */

.score-high {
    --tw-text-opacity: 1;
    color: rgb(0 176 80 / 1);
    color: rgb(0 176 80 / var(--tw-text-opacity, 1));
}

.score-medium {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / 1);
    color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

[data-theme="light"] .score-medium {
    --tw-text-opacity: 1;
    color: rgb(202 138 4 / 1);
    color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}

.score-low {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / 1);
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

[data-theme="light"] .score-low {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / 1);
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

/* =============================================================================
   LIGHT THEME TEXT OVERRIDES
   ============================================================================= */

[data-theme="light"] .text-white {
    color: var(--text-primary) !important;
}

[data-theme="light"] .text-white\/50,
[data-theme="light"] .text-white\/60,
[data-theme="light"] .text-white\/70 {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .text-white\/30,
[data-theme="light"] .text-white\/40 {
    color: var(--text-muted) !important;
}

/* =============================================================================
   LIGHT THEME BACKGROUND OVERRIDES
   ============================================================================= */

[data-theme="light"] .bg-white\/5,
[data-theme="light"] .bg-white\/10 {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .border-white\/5,
[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-white\/20 {
    border-color: var(--border-default) !important;
}

[data-theme="light"] .hover\:bg-white\/5:hover,
[data-theme="light"] .hover\:bg-white\/10:hover {
    background-color: rgba(0, 0, 0, 0.08) !important;
}


/*# sourceMappingURL=main-b1f74e0a.75d00a30.css.map*/