/*
File: crm.css
Location: /var/www/html/modular.nsgia.com/static/css/
Description: Comprehensive styles for the entire CRM module

Changelog:
- 2025-02-28 v1.0: Initial implementation
  - Created unified styling for all CRM components
  - Namespaced all classes with crm- prefix to avoid conflicts
  - Designed with a dense, professional CRM layout
  - Supports all CRM pages: companies, contacts, search, reports
*/

/* ----- General CRM Styles ----- */
.crm-container {
    font-size: 13px;
    line-height: 1.4;
    color: #333;
}

.crm-section {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.crm-section-title {
    margin: 0 0 15px 0;
    padding-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid #eee;
}

/* ----- Buttons & Controls ----- */
.crm-button {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 3px;
}

.crm-button-primary {
    color: #fff;
    background-color: #2c76dc;
    border-color: #2368c7;
}

.crm-button-primary:hover {
    background-color: #1e5bb0;
    border-color: #1a4f99;
}

.crm-button-secondary {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.crm-button-secondary:hover {
    background-color: #e8e8e8;
    border-color: #c8c8c8;
}

.crm-button-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

.crm-button-danger:hover {
    background-color: #c9302c;
    border-color: #ac2925;
}

/* ----- Form Elements ----- */
.crm-form-group {
    margin-bottom: 10px;
}

.crm-form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 13px;
}

.crm-form-control {
    display: block;
    width: 100%;
    height: 32px;
    padding: 6px 8px;
    font-size: 13px;
    line-height: 1.4;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

.crm-form-control:focus {
    border-color: #2c76dc;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px rgba(44, 118, 220, .4);
}

.crm-select {
    height: 32px;
    padding: 6px 8px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
}

.crm-textarea {
    min-height: 60px;
}

.crm-form-hint {
    display: block;
    margin-top: 5px;
    color: #737373;
    font-size: 12px;
}

.crm-form-error {
    color: #d9534f;
    font-size: 12px;
    margin-top: 5px;
}

/* ----- Tables ----- */
.crm-table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 15px;
    border-collapse: collapse;
    font-size: 13px;
}

.crm-table th,
.crm-table td {
    padding: 8px;
    text-align: left;
    border: 1px solid #ddd;
}

.crm-table th {
    font-weight: 600;
    background-color: #f5f5f5;
    color: #333;
}

.crm-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.crm-table tr:hover {
    background-color: #f2f2f2;
}

.crm-table-compact th,
.crm-table-compact td {
    padding: 5px;
    font-size: 12px;
}

/* ----- Data Cards ----- */
.crm-card {
    border: 1px solid #ddd;
    border-radius: 3px;
    margin-bottom: 15px;
    background-color: #fff;
}

.crm-card-header {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
}

.crm-card-body {
    padding: 15px;
}

.crm-data-row {
    margin-bottom: 8px;
    display: flex;
}

.crm-data-label {
    flex: 0 0 30%;
    font-weight: 600;
    color: #666;
}

.crm-data-value {
    flex: 0 0 70%;
}

/* ----- Search Page ----- */
.crm-search-form {
    margin-bottom: 15px;
    padding: 10px 15px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.crm-search-input {
    width: 60%;
    display: inline-block;
    margin-right: 10px;
}

.crm-search-result {
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.crm-tabs {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

.crm-tab {
    padding: 8px 15px;
    margin-right: 2px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-bottom: none;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    cursor: pointer;
    font-size: 13px;
}

.crm-tab.active {
    background-color: #fff;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
    font-weight: 600;
}

.crm-tab-content {
    display: none;
    padding: 15px 0;
}

.crm-tab-content.active {
    display: block;
}

/* ----- Pagination ----- */
.crm-pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.crm-page-item {
    display: inline-block;
    margin: 0 2px;
}

.crm-page-link {
    display: block;
    padding: 5px 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #2c76dc;
    text-decoration: none;
    border-radius: 3px;
}

.crm-page-link.active {
    background-color: #2c76dc;
    color: #fff;
    border-color: #2c76dc;
}

.crm-page-link:hover:not(.active) {
    background-color: #f5f5f5;
}

/* ----- Dashboard Statistics ----- */
.crm-stats-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px 15px;
}

.crm-stat-card {
    flex: 1 0 200px;
    margin: 0 10px 15px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    text-align: center;
}

.crm-stat-number {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #2c76dc;
}

.crm-stat-label {
    font-size: 13px;
    color: #666;
}

/* ----- Reports ----- */
.crm-report-filters {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 3px;
    margin-bottom: 15px;
}

.crm-date-filter {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.crm-date-filter label {
    margin-right: 5px;
    font-weight: 600;
}

.crm-report-actions {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.crm-report-summary {
    font-size: 14px;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 3px;
}

/* ----- Responsiveness ----- */
@media (max-width: 768px) {
    .crm-search-input {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .crm-data-row {
        flex-direction: column;
        margin-bottom: 15px;
    }
    
    .crm-data-label {
        margin-bottom: 5px;
    }
    
    .crm-report-filters {
        flex-direction: column;
    }
    
    .crm-date-filter {
        margin-bottom: 10px;
    }
}
/* 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;
}

/* Fix the Add Activity button */
.crm-section .add-activity-btn {
    width: auto;
    padding: 6px 15px;
    margin-top: 10px;
    float: right;
}

/* 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;
}