/* Modern Premium Light Theme Stylesheet - Disha Sales Bot Dashboard */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    
    /* Clean Light Theme Color Palette */
    --bg-dark: hsl(220, 20%, 97%);        /* Light background */
    --bg-card: hsl(0, 0%, 100%);          /* Pure white card */
    --bg-sidebar: hsl(220, 20%, 95%);     /* Soft grey sidebar */
    --border-color: hsl(220, 15%, 88%);   /* Subtle borders */
    
    --primary: hsl(263, 75%, 55%);        /* Warm Royal Violet */
    --primary-glow: hsla(263, 75%, 55%, 0.08);
    --secondary: hsl(190, 80%, 45%);      /* Teal Accent */
    --accent: hsl(330, 80%, 55%);
    
    --text-main: hsl(220, 25%, 15%);      /* High-readability dark grey */
    --text-muted: hsl(220, 12%, 45%);     /* Secondary grey */
    --text-bright: hsl(220, 30%, 10%);    /* Main titles */
    --text-on-primary: hsl(0, 0%, 100%);  /* White text on dark accents */
    
    --success: hsl(145, 75%, 35%);
    --warning: hsl(35, 85%, 45%);
    --danger: hsl(355, 75%, 45%);
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-dark);
    color: var(--text-main);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-bright);
    font-weight: 600;
}

/* Premium Light Cards with soft shadows */
.glass-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    transform: translateY(-2px);
    border-color: hsla(263, 75%, 55%, 0.3);
    box-shadow: 0 10px 30px 0 rgba(108, 92, 231, 0.08);
}

/* Sidebar Light Styling */
.sidebar {
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    padding: 1.5rem 1rem;
}

.sidebar .nav-link {
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-weight: 500;
    padding: 0.8rem 1.2rem;
    border-radius: 12px;
    margin-bottom: 0.4rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.sidebar .nav-link:hover, .sidebar .nav-link.active {
    color: var(--primary);
    background: var(--primary-glow);
    font-weight: 600;
}

@media (min-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 100;
        width: 16.666667%; /* matches col-lg-2 */
        overflow-y: auto;
        height: 100vh;
    }
    
    main {
        margin-left: 16.666667% !important;
        width: calc(100% - 16.666667%) !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .sidebar {
        width: 25%; /* matches col-md-3 */
    }
    
    main {
        margin-left: 25% !important;
        width: calc(100% - 25%) !important;
    }
}

/* Custom Gradient Button */
.btn-premium {
    background: linear-gradient(135deg, var(--primary), hsl(263, 85%, 65%));
    color: hsl(0, 0%, 100%);
    border: none;
    font-family: var(--font-heading);
    font-weight: 600;
    border-radius: 12px;
    padding: 0.7rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-premium:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.25);
    color: hsl(0, 0%, 100%);
}

/* Chat container details */
.chat-container {
    height: 520px;
    overflow-y: auto;
    padding: 1.5rem;
    background-color: hsl(220, 20%, 98%);
    border-radius: 16px;
    border: 1px solid var(--border-color);
}

.message-bubble {
    max-width: 75%;
    padding: 0.8rem 1.2rem;
    border-radius: 16px;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.message-bubble.inbound {
    background-color: hsl(220, 15%, 90%);
    color: var(--text-main);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.message-bubble.outbound {
    background: linear-gradient(135deg, var(--primary), hsl(263, 80%, 60%));
    color: hsl(0, 0%, 100%);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    margin-left: auto;
    box-shadow: 0 2px 5px rgba(108, 92, 231, 0.15);
}

/* Scoring badges indicator */
.badge-cold {
    background-color: rgba(108, 117, 125, 0.1);
    color: #495057;
    border: 1px solid rgba(108, 117, 125, 0.25);
}

.badge-warm {
    background-color: rgba(217, 164, 6, 0.12);
    color: #b58900;
    border: 1px solid rgba(217, 164, 6, 0.25);
}

.badge-hot {
    background-color: rgba(230, 92, 0, 0.1);
    color: #d35400;
    border: 1px solid rgba(230, 92, 0, 0.25);
}

.badge-priority {
    background-color: rgba(220, 53, 69, 0.08);
    color: #b02a37;
    border: 1px solid rgba(220, 53, 69, 0.2);
}

/* Tables custom styling for Light Theme */
.table {
    --bs-table-bg: transparent !important;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.02) !important;
    color: var(--text-main) !important;
}

.table tr {
    border-bottom: 1px solid var(--border-color) !important;
}

.table th {
    color: var(--text-muted) !important;
    font-weight: 600;
}

.table td {
    color: var(--text-main) !important;
}

/* Input Form Controls */
.form-control, .form-select {
    background-color: hsl(0, 0%, 100%) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    border-radius: 10px;
    padding: 0.6rem 1rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-glow) !important;
}

/* Custom styling for inputs group */
.input-group-text {
    background-color: hsl(220, 20%, 95%) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
}

.list-group-item {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

.list-group-item:hover {
    background-color: rgba(108, 92, 231, 0.04) !important;
}

/* Blinking animation for takeover alert */
@keyframes pulse-red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(220, 53, 69, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}
.badge-takeover-alert {
    background-color: var(--danger);
    color: white;
    font-weight: 600;
    padding: 0.35em 0.65em;
    border-radius: 50rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    animation: pulse-red 1.5s infinite;
}
.badge-takeover-alert .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
}