/* 
File name: deals.css
Version: 2025-03-01_v1.0
Purpose: Custom styling for the deals pipeline module
Author: Claude assistant

Changelog:
- 2025-03-01_v1.0: Initial creation with styles for deals pipeline, kanban board, and deal details
*/

/* All deals-specific elements use the deals- prefix to avoid conflicts */
.deals-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Dashboard Cards */
.deals-stats-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.deals-stat-card {
    flex: 1 1 200px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    border-top: 4px solid #3498db;
}

.deals-stat-card.open {
    border-top-color: #3498db;
}

.deals-stat-card.won {
    border-top-color: #2ecc71;
}

.deals-stat-card.archived {
    border-top-color: #6c757d;
}

.deals-stat-card.total {
    border-top-color: #9b59b6;
}

.deals-stat-card h3 {
    margin-top: 0;
    color: #7f8c8d;
    font-size: 16px;
    font-weight: normal;
}

.deals-stat-card .deals-stat-value {
    font-size: 32px;
    font-weight: bold;
    color: #2c3e50;
    margin: 10px 0;
}

.deals-stat-card .deals-stat-amount {
    font-size: 18px;
    color: #2c3e50;
}

/* Deals Table */
.deals-table-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 30px;
}

.deals-table {
    width: 100%;
    border-collapse: collapse;
}

.deals-table th {
    background-color: #f8f9fa;
    text-align: left;
    padding: 12px 15px;
    font-weight: bold;
    border-bottom: 1px solid #e9ecef;
}

.deals-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
}

.deals-table tr:last-child td {
    border-bottom: none;
}

.deals-table tr:hover {
    background-color: #f8f9fa;
}

.deals-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: white;
}

/* Kanban Board */
.deals-kanban-container {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 20px;
    min-height: 600px;
}

.deals-kanban-stage {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-height: 800px;
}

.deals-kanban-stage-header {
    padding: 15px;
    border-bottom: 1px solid #e9ecef;
    background-color: #fff;
    border-radius: 8px 8px 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.deals-kanban-stage-title {
    margin: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.deals-kanban-stage-count {
    background-color: #e9ecef;
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: normal;
}

.deals-kanban-cards {
    padding: 15px;
    overflow-y: auto;
    flex-grow: 1;
}

.deals-kanban-card {
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin-bottom: 15px;
    cursor: grab;
    transition: transform 0.2s, box-shadow 0.2s;
}

.deals-kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.deals-kanban-card-title {
    margin: 0 0 10px 0;
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
}

.deals-kanban-card-company {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    color: #7f8c8d;
}

.deals-kanban-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-top: 10px;
}

.deals-kanban-card-value {
    font-weight: 600;
}

.deals-kanban-card.is-dragging {
    opacity: 0.5;
    cursor: grabbing;
}

/* Deal Details */
.deals-detail-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.deals-detail-header {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
}

.deals-detail-title {
    margin: 0 0 15px 0;
    font-size: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.deals-detail-actions {
    display: flex;
    gap: 10px;
}

.deals-detail-info {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.deals-detail-info-item {
    flex: 1 1 200px;
}

.deals-detail-info-label {
    font-size: 14px;
    color: #7f8c8d;
    margin-bottom: 5px;
}

.deals-detail-info-value {
    font-size: 16px;
    color: #2c3e50;
}

.deals-detail-main {
    flex: 2;
    min-width: 300px;
}

.deals-detail-sidebar {
    flex: 1;
    min-width: 250px;
}

.deals-detail-section {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.deals-detail-section-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
}

.deals-detail-section-title {
    margin: 0;
    font-size: 18px;
}

.deals-detail-section-content {
    padding: 20px;
}

/* Forms */
.deals-form-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 30px;
    max-width: 800px;
    margin: 0 auto;
}

.deals-form-section {
    margin-bottom: 30px;
}

.deals-form-section-title {
    margin: 0 0 15px 0;
    font-size: 20px;
    color: #2c3e50;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9ecef;
}

.deals-form-group {
    margin-bottom: 20px;
}

.deals-form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.deals-form-input,
.deals-form-select,
.deals-form-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.deals-form-textarea {
    min-height: 100px;
    resize: vertical;
}

.deals-form-select {
    height: 40px;
}

/* Notes & Activities */
.deals-notes-list,
.deals-activities-list {
    max-height: 400px;
    overflow-y: auto;
}

.deals-note-item,
.deals-activity-item {
    padding: 15px 0;
    border-bottom: 1px solid #e9ecef;
}

.deals-note-item:last-child,
.deals-activity-item:last-child {
    border-bottom: none;
}

.deals-note-header,
.deals-activity-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.deals-note-author,
.deals-activity-author {
    font-weight: 500;
}

.deals-note-date,
.deals-activity-date {
    font-size: 12px;
    color: #7f8c8d;
}

.deals-note-content {
    color: #2c3e50;
    white-space: pre-line;
}

.deals-activity-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
}

.deals-activity-type {
    background-color: #e9ecef;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

/* Emails */
.deals-email-list {
    max-height: 500px;
    overflow-y: auto;
}

.deals-email-item {
    padding: 15px;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
}

.deals-email-item:hover {
    background-color: #f8f9fa;
}

.deals-email-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.deals-email-from {
    font-weight: 500;
}

.deals-email-date {
    font-size: 12px;
    color: #7f8c8d;
}

.deals-email-subject {
    font-weight: 500;
    margin-bottom: 5px;
}

.deals-email-preview {
    color: #7f8c8d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Contact Selection */
.deals-contacts-container {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
}

.deals-contacts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.deals-contact-item {
    padding: 5px 0;
    display: flex;
    align-items: center;
}

.deals-contact-item input[type="checkbox"] {
    margin-right: 10px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .deals-container {
        padding: 10px;
    }
    
    .deals-detail-container {
        flex-direction: column;
    }
    
    .deals-kanban-stage {
        flex: 0 0 auto;
        width: 280px;
    }
}
/* Deal Details - Improved Layout */
.deals-detail-container {
    display: flex;
    gap: 20px;
    width: 80%;
    margin: 0 auto;
}

.deals-detail-main {
    flex: 3;
    min-width: 300px;
}

.deals-detail-sidebar {
    flex: 1;
    min-width: 250px;
}

/* Fix for header to match container width */
.deals-detail-header {
    width: 80%;
    margin: 0 auto 20px auto;
}

/* Fix for form controls */
.crm-section textarea,
.crm-section input,
.crm-section select {
    font-size: 13px;
}

/* Fix for buttons that are too large */
.crm-section .crm-button {
    width: auto;
    display: inline-block;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .deals-detail-container,
    .deals-detail-header {
        width: 95%;
    }
    
    .deals-detail-container {
        flex-direction: column;
    }
}
/* Deal Details - Improved Layout */
.deals-detail-container {
    display: flex;
    gap: 20px;
    width: 80%;
    margin: 0 auto;
}

.deals-detail-main {
    flex: 3;
    min-width: 300px;
}

.deals-detail-sidebar {
    flex: 1;
    min-width: 250px;
}

/* Fix for header to match container width */
.deals-detail-header {
    width: 80%;
    margin: 0 auto 20px auto;
}

/* Fix for form controls */
.crm-section textarea,
.crm-section input,
.crm-section select {
    font-size: 13px;
}

/* Fix for buttons that are too large */
.crm-section .crm-button {
    width: auto;
    display: inline-block;
}

/* Fixes for Notes Section */
.crm-section .crm-section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

/* Fix the Add Note button */
.crm-section form button[type="submit"],
.crm-section form input[type="submit"] {
    width: auto;
    padding: 6px 15px;
    margin-top: 10px;
    float: right;
}

/* Add proper spacing between sections */
.crm-section form {
    margin-bottom: 20px;
}

/* Fix textarea height */
.crm-section textarea {
    min-height: 80px;
    margin-bottom: 10px;
    resize: vertical;
}

/* Fix Activities table spacing */
.crm-section table {
    margin-bottom: 15px;
    width: 100%;
}

.crm-section table th,
.crm-section table td {
    padding: 8px;
    vertical-align: top;
}

/* Add spacing for activity description */
.crm-section .activity-description {
    margin-top: 15px;
}

/* No content messages */
.crm-section .no-content-message {
    color: #666;
    font-style: italic;
    margin: 15px 0;
}

/* Clear floats */
.crm-section form::after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .deals-detail-container,
    .deals-detail-header {
        width: 95%;
    }
    
    .deals-detail-container {
        flex-direction: column;
    }
}