/* ── AgencyOS CRM - Light Mode Premium Styles (CRMS Theme Mockup) ── */

/* Google Fonts - Public Sans and Poppins */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* Rich Editor List Overrides */
.rich-editor-content ul {
    list-style-type: disc !important;
    padding-left: 20px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}
.rich-editor-content ol {
    list-style-type: decimal !important;
    padding-left: 20px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}
.rich-editor-content li {
    display: list-item !important;
}

/* ── Base & Global Overrides ── */
* { 
    font-family: 'Public Sans', 'Poppins', system-ui, -apple-system, sans-serif; 
}
body { 
    overflow-x: hidden; 
    background-color: #f4f5f9 !important;
    color: #333d47 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f4f5f9; }
::-webkit-scrollbar-thumb { background: rgba(254, 63, 80, 0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(254, 63, 80, 0.4); }

/* ── Accent & Brand Colors (Coral Red Gradient) ── */
.gradient-text {
    background: linear-gradient(135deg, #fe3f50, #e11d48) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ── INTERCEPT & CONVERT ALL TAILWIND DARK SLATE BACKGROUNDS ── */
.bg-slate-950,
.bg-slate-950\/20,
.bg-slate-950\/40,
.bg-slate-950\/50,
.bg-slate-950\/60,
.bg-slate-950\/80,
.bg-slate-900,
.bg-slate-900\/80,
.bg-slate-900\/30,
.bg-slate-900\/40,
.bg-slate-900\/50,
.bg-slate-900\/60,
.bg-slate-850,
.bg-slate-850\/30,
.bg-slate-800,
.bg-slate-800\/30,
.bg-slate-800\/50,
.bg-slate-800\/60,
.bg-slate-750,
.bg-slate-700,
.glass-panel,
.glass-card,
.backdrop-blur-md,
.backdrop-blur-xl {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-color: #eaedf1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02) !important;
    border-radius: 10px !important;
}

/* ── Table Header, Pipeline Columns, and Special Containers ── */
tr.border-b.bg-slate-950\/60,
thead.bg-slate-950\/60,
.bg-slate-950\/60,
.pipeline-column,
.bg-slate-950\/50,
.bg-slate-950\/20,
.bg-slate-800,
.chan-btn {
    background-color: #f8f9fa !important;
    background: #f8f9fa !important;
}

/* ── Overwrite All Dark Slate Borders to Crisp Light Gray ── */
.border-slate-900,
.border-slate-900\/60,
.border-slate-850,
.border-slate-850\/60,
.border-slate-850\/40,
.border-slate-850\/80,
.border-slate-800,
.border-slate-800\/80,
.border-slate-800\/60,
.border-slate-800\/50,
.border-slate-700,
.border-slate-700\/50,
.border-slate-600 {
    border-color: #eaedf1 !important;
}

/* ── Hover Row Highlight & drag highlight ── */
.hover\:bg-slate-900\/30:hover,
.hover\:bg-slate-850\/30:hover,
.hover\:bg-slate-800\/30:hover,
.lead-row:hover,
.followup-row:hover,
.hover\:bg-slate-900:hover,
tr:hover,
.pipeline-card:hover {
    background-color: #f9fafb !important;
    background: #f9fafb !important;
}

/* ── Text Color Overrides for Light Mode ── */
.text-slate-100, 
.text-slate-200, 
.text-slate-250,
.text-slate-300, 
.text-slate-350,
.text-white {
    color: #1f2937 !important;
}
.text-slate-400, 
.text-slate-450,
.text-slate-500,
.text-slate-550 {
    color: #5b6e88 !important;
}
.text-slate-600 {
    color: #9ca3af !important;
}
.text-slate-700 {
    color: #374151 !important;
}

/* ── INTERCEPT & CONVERT INDIGO/VIOLET GRADIENT BUTTONS & METRICS ── */
.bg-gradient-to-r.from-indigo-500.to-violet-600,
.bg-gradient-to-r.from-indigo-600.to-violet-700,
.bg-gradient-to-br.from-indigo-500.to-violet-600,
.bg-indigo-600,
.bg-indigo-500,
.hover\:from-indigo-600:hover,
.hover\:to-violet-700:hover,
[class*="from-indigo-"],
[class*="to-violet-"],
.bg-gradient-to-br.from-indigo-500.to-violet-600,
.chan-btn.active {
    background: linear-gradient(135deg, #fe3f50, #e11d48) !important;
    background-image: linear-gradient(135deg, #fe3f50, #e11d48) !important;
    --tw-gradient-from: #fe3f50 !important;
    --tw-gradient-to: #e11d48 !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(254, 63, 80, 0.15) !important;
}

.text-indigo-400,
.text-indigo-450 {
    color: #fe3f50 !important;
}

/* ── Top Bar / Header ── */
header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #eaedf1 !important;
}
header h2 {
    color: #111827 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}
header svg, 
header button {
    color: #5b6e88 !important;
}
header span {
    color: #374151 !important;
}

/* ── Sidebar (Clean White Sidebar with Coral Accents like CRMS) ── */
aside#sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid #eaedf1 !important;
}
aside#sidebar .gradient-text {
    background: linear-gradient(135deg, #fe3f50, #e11d48) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
}
aside#sidebar p {
    color: #94a3b8 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 0.8px !important;
}
.sidebar-link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; border-radius: 8px;
    color: #5b6e88 !important; font-size: 14px; font-weight: 500;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    text-decoration: none;
}
.sidebar-link svg {
    color: #5b6e88 !important;
}
.sidebar-link:hover {
    color: #fe3f50 !important;
    background: rgba(254, 63, 80, 0.05) !important;
}
.sidebar-link.active {
    color: #fe3f50 !important;
    background: rgba(254, 63, 80, 0.08) !important;
    border-left-color: #fe3f50 !important;
    font-weight: 600 !important;
}
.sidebar-link.active svg { 
    color: #fe3f50 !important; 
}
aside#sidebar .border-t {
    border-top: 1px solid #eaedf1 !important;
    background-color: #f8fafc !important;
}
aside#sidebar .text-slate-200 {
    color: #1f2937 !important;
    font-weight: 600 !important;
}
aside#sidebar .text-slate-500 {
    color: #64748b !important;
}

/* ── Toast Notifications ── */
.toast-container {
    position: fixed; top: 20px; right: 20px; z-index: 9999;
    display: flex; flex-direction: column; gap: 10px;
}
.toast {
    padding: 14px 20px; border-radius: 10px; min-width: 300px;
    background: #ffffff !important;
    border: 1px solid #eaedf1 !important;
    font-size: 14px; font-weight: 500; color: #1f2937 !important;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;
}
.toast-success { border-left: 4px solid #22c55e !important; }
.toast-error { border-left: 4px solid #ef4444 !important; }
.toast-info { border-left: 4px solid #3b82f6 !important; }

/* ── Stats Card ── */
.stats-card {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 10px !important;
}
.stats-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.04) !important;
}

/* ── Badge Styles ── */
.badge {
    padding: 4px 10px; border-radius: 4px !important;
    font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
    text-transform: uppercase;
}
.badge-hot { background: rgba(254, 63, 80, 0.1) !important; color: #e11d48 !important; border: 1px solid rgba(254, 63, 80, 0.15) !important; }
.badge-warm { background: rgba(245, 158, 11, 0.1) !important; color: #d97706 !important; border: 1px solid rgba(245, 158, 11, 0.15) !important; }
.badge-cold { background: rgba(59, 130, 246, 0.1) !important; color: #2563eb !important; border: 1px solid rgba(59, 130, 246, 0.15) !important; }
.badge-won { background: rgba(34, 197, 94, 0.1) !important; color: #16a34a !important; border: 1px solid rgba(34, 197, 94, 0.15) !important; }
.badge-pending { background: rgba(245, 158, 11, 0.1) !important; color: #d97706 !important; border: 1px solid rgba(245, 158, 11, 0.15) !important; }
.badge-approved { background: rgba(34, 197, 94, 0.1) !important; color: #16a34a !important; border: 1px solid rgba(34, 197, 94, 0.15) !important; }
.badge-rejected { background: rgba(239, 68, 68, 0.1) !important; color: #dc2626 !important; border: 1px solid rgba(239, 68, 68, 0.15) !important; }
.badge-active { background: rgba(34, 197, 94, 0.1) !important; color: #16a34a !important; border: 1px solid rgba(34, 197, 94, 0.15) !important; }

/* ── Table Styles ── */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table th {
    padding: 14px 16px; text-align: left;
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.8px; color: #4b5563 !important;
    border-bottom: 2px solid #eaedf1 !important;
    background-color: #f9fafb !important;
}
.data-table td {
    padding: 14px 16px; font-size: 13px !important; color: #374151 !important;
    border-bottom: 1px solid #f3f4f6 !important;
}
.data-table tbody tr {
    transition: background 0.15s ease;
}
.data-table tbody tr:hover {
    background-color: #f9fafb !important;
}

/* ── Secondary / Light Buttons ── */
.bg-slate-700, 
.bg-slate-750, 
.hover\:bg-slate-600:hover {
    background-color: #f3f4f6 !important;
    color: #4b5563 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
}
.bg-slate-700:hover, 
.bg-slate-750:hover {
    background-color: #e5e7eb !important;
    color: #1f2937 !important;
}

/* ── Form Inputs ── */
.form-input, 
input, 
select, 
textarea {
    width: 100%; padding: 10px 14px;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important; color: #1f2937 !important;
    font-size: 13px !important; transition: all 0.2s ease;
    outline: none;
}
.form-input:focus, 
input:focus, 
select:focus, 
textarea:focus {
    border-color: #fe3f50 !important;
    box-shadow: 0 0 0 3px rgba(254, 63, 80, 0.1) !important;
    background-color: #ffffff !important;
}
input::placeholder, 
textarea::placeholder { 
    color: #9ca3af !important; 
}

/* ── Progress Bar ── */
.progress-bar {
    height: 6px; border-radius: 3px;
    background: #e5e7eb !important;
    overflow: hidden;
}
.progress-fill {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, #fe3f50, #e11d48) !important;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Modal ── */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center;
}
.modal-backdrop.active { display: flex; }
.modal-content {
    background-color: #ffffff !important;
    border: 1px solid #eaedf1 !important;
    border-radius: 12px !important; padding: 24px; width: 90%; max-width: 540px;
    animation: fadeIn 0.3s ease-out;
    color: #1f2937 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02) !important;
}

/* ── Kanban Board & Pipeline ── */
.pipeline-column {
    background-color: #f3f4f6 !important;
    border: 1px solid #eaedf1 !important;
    border-radius: 12px !important;
}
.pipeline-card {
    background-color: #ffffff !important;
    border: 1px solid #eaedf1 !important;
    border-radius: 8px !important; padding: 14px;
    color: #333d47 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
}
.pipeline-card:hover {
    background-color: #ffffff !important;
    border-color: #fe3f50 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
}

/* ── Auth Page ── */
.auth-bg {
    background: linear-gradient(-45deg, #f4f5f9, #fce7f3, #e0e7ff, #f4f5f9) !important;
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}
.auth-card {
    background-color: #ffffff !important;
    border: 1px solid #eaedf1 !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.04) !important;
}

/* ── Modal & Drawer Backdrop Overrides (Ensure semi-transparent dark slate overlays) ── */
#drawer-backdrop,
#lead-modal,
#createCampaignModal,
#updateStatsModal,
#assignTeamModal,
#followup-modal,
#createProposalModal,
#negotiationModal,
.modal-backdrop,
#sidebar-overlay {
    background-color: rgba(15, 23, 42, 0.45) !important;
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ── Reminder Modal Animations & Pulse ── */
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-15deg); }
    30% { transform: rotate(12deg); }
    45% { transform: rotate(-10deg); }
    60% { transform: rotate(8deg); }
    75% { transform: rotate(-4deg); }
}
.animate-wiggle {
    animation: wiggle 1s ease-in-out infinite;
}
.bell-pulse {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    animation: bellPulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}
@keyframes bellPulse {
    to { box-shadow: 0 0 0 16px rgba(239, 68, 68, 0); }
}
@keyframes bounceShort {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.animate-bounce-short {
    animation: bounceShort 0.5s ease-out;
}

/* ── Task View: Force primary buttons to CRM red ── */
.btn-save,
button.btn-save {
    background: linear-gradient(135deg, #fe3f50, #e11d48) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(254,63,80,.18) !important;
}
.btn-save:hover,
button.btn-save:hover {
    filter: brightness(1.06) !important;
}
.ctrl-btn.mark-read {
    background: linear-gradient(135deg, #fe3f50, #e11d48) !important;
    border-color: transparent !important;
    color: #fff !important;
}
/* Task list left-border status accents */
.task-row.status-pending   { border-left-color: #6366f1 !important; }
.task-row.status-inprogress{ border-left-color: #f59e0b !important; }
.task-row.status-completed { border-left-color: #22c55e !important; }

/* Task modal overlay same as global semi-transparent backdrop */
.task-modal-overlay {
    background: rgba(15,23,42,0.45) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Tab active indicator — CRM red */
.tab-btn.active {
    color: #fe3f50 !important;
    border-bottom-color: #fe3f50 !important;
}
.tab-badge {
    background: #fee2e2 !important;
    color: #e11d48 !important;
}

/* ── Text Expansion Clamping Fallback ── */
.line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}