/* 
 * CRM Application - Main CSS File
 * This file imports all module-specific CSS files
 * Last Updated: 2024
 */

/* ===========================================
   PREMIUM CRM DESIGN SYSTEM (Complete)
   =========================================== */
@import url('./crm-premium-ui.css');       /* Filter bar, buttons, tabs, search */
@import url('./crm-premium-table.css');    /* Table, pills, chips, icons */
@import url('./crm-premium-grid.css');     /* Card/Grid layout */
@import url('./crm-icons.css');            /* Field icon mapping */

/* ===========================================
   CUSTOM CRM COMMON MODULES
   =========================================== */
@import url('./custom-crm/common/final-list-module.css');
@import url('./custom-crm/common/toaster.css');
@import url('./custom-crm/common/sweet-alert.css');
@import url('./livewire-navigation-fixes.css');
@import url('./sidebar-fixes.css');

/* ===========================================
   REPORTS & FILTERS
   =========================================== */
@import url('./reports/filter-badges.css');
@import url('./reports/table.css');

/* ===========================================
   ANT BADGE PREMIUM STYLING
   =========================================== */
.ant-badge {
    display: inline-block !important;
    margin-left: 0 !important;
    margin-top: 0px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    background: #008ed3 !important;
    color: #ffffff !important;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 6px rgba(99,102,241,0.4) !important;
    transition: all 0.2s ease !important;
    white-space: normal;
}

/* ===========================================
   STATUS PILL STYLING (Premium CRM)
   =========================================== */
.status-pill {
    padding: 3px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

/* Status Colors */
.status-pill.status-cold,
.status-pill.status-new,
.status-pill.status-pending {
    background: #f1f5f9 !important;
    color: #64748b !important;
}

.status-pill.status-warm,
.status-pill.status-contacted,
.status-pill.status-in-progress {
    background: #fed7aa !important;
    color: #c2410c !important;
}

.status-pill.status-hot,
.status-pill.status-qualified,
.status-pill.status-active {
    background: #fecaca !important;
    color: #991b1b !important;
}

.status-pill.status-won,
.status-pill.status-converted,
.status-pill.status-completed {
    background: #d1fae5 !important;
    color: #065f46 !important;
}

.status-pill.status-lost,
.status-pill.status-cancelled {
    background: #7f1d1d !important;
    color: #ffffff !important;
}

/* ===========================================
   OWNER CHIP STYLING
   =========================================== */
.owner-chip {
    display: inline-flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0 !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: transparent !important;
    font-size: 12px !important;
    color: #1e293b !important;
    font-weight: 500 !important;
}

.owner-chip i {
    font-size: 11px !important;
    color: #64748b !important;
}

/* ===========================================
   ACTION BUTTONS STYLING
   =========================================== */
.action-btn {
    border-radius: 8px !important;
    padding: 6px !important;
    transition: 0.2s !important;
    border: none !important;
    background: transparent !important;
    color: #64748b !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
}

.action-btn:hover {
    background: #e0e7ff !important;
    color: #4f46e5 !important;
}

.action-btn.action-view {
    color: #2563eb !important;
}

.action-btn.action-view:hover {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

.action-btn.action-edit {
    color: #64748b !important;
}

.action-btn.action-edit:hover {
    background: #f1f5f9 !important;
    color: #475569 !important;
}

.action-btn.action-delete {
    color: #dc2626 !important;
}

.action-btn.action-delete:hover {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}

/* ===========================================
   PREMIUM TABLE STYLING
   =========================================== */
.table-premium {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.table-premium thead {
    background: #f8fafc !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

.table-premium thead th {
    padding: 12px 16px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: none !important;
}

.table-premium tbody tr {
    border-bottom: 1px solid #f1f5f9 !important;
    transition: all 0.15s ease !important;
}

.table-premium tbody tr:hover {
    background: #f1f5f9 !important;
}

.table-premium tbody td {
    padding: 12px 16px !important;
    font-size: 13px !important;
    color: #1e293b !important;
    vertical-align: middle !important;
}

/* ===========================================
   CARD VIEW / GRID STYLING
   =========================================== */
.card-view {
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important;
    transition: 0.2s ease !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

.card-view:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12) !important;
}

.grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 18px !important;
}

.grid-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important;
    transition: 0.2s ease !important;
    border: 1px solid #e2e8f0 !important;
}

.grid-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12) !important;
}

/* ===========================================
   DATE CHIP STYLING
   =========================================== */
.date-chip {
    display: inline-block !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

/* ===========================================
   FIELD ICONS STYLING
   =========================================== */
.field-with-icon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #1e293b !important;
}

.field-with-icon i {
    font-size: 12px !important;
    color: #64748b !important;
    width: 14px !important;
    text-align: center !important;
}

.field-phone {
    color: #2563eb !important;
    text-decoration: none !important;
}

.field-phone:hover {
    color: #1d4ed8 !important;
    text-decoration: underline !important;
}

.field-email {
    color: #2563eb !important;
    text-decoration: none !important;
}

.field-email:hover {
    color: #1d4ed8 !important;
    text-decoration: underline !important;
}

/* ===========================================
   PREMIUM TOP BAR STYLING
   =========================================== */
.premium-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
    padding: 1rem 1.5rem !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.premium-top-bar-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.premium-top-bar-btn:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

.premium-top-bar-btn.active {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

.premium-top-bar-btn i {
    font-size: 14px !important;
}

/* Select2 dropdown option styling */
.select2-results__option .ant-badge {
    display: inline-block !important;
    margin-left: 6px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3) !important;
}

/* Hover effect on dropdown options */
.select2-results__option--highlighted .ant-badge {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9)) !important;
    color: #6366f1 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    transform: scale(1.05) !important;
}

/* Selected option styling */
.select2-container--default .select2-selection--single .select2-selection__rendered .ant-badge,
.select2-container--default .select2-selection--multiple .select2-selection__choice .ant-badge {
    display: inline-block !important;
    margin-left: 6px !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    border-radius: 5px !important;
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 1px 2px rgba(99, 102, 241, 0.4) !important;
}
.toolbar-toggle{
    cursor: pointer;
    transition: all 0.2s ease;
}

/* ===========================================
   CSS VARIABLES & GLOBAL STYLES
   =========================================== */
@import url('./custom-crm/variables/variable-field-master.css');
@import url('./custom-crm/variables/custom-variable-field-master.css');
@import url('./custom-crm/variables/email-template-master.css');

/* ===========================================
   COMMON COMPONENTS
   =========================================== */
@import url('./custom-crm/common/header-module.css');
@import url('./custom-crm/common/sidebar-module.css');
@import url('./custom-crm/common/model-module.css');
@import url('./custom-crm/common/detail-form.css');
@import url('./custom-crm/common/dynamic-form-premium.css');
@import url('./custom-crm/common/final-list-module.css');

/* ===========================================
   CUSTOMIZATION MODULES
   =========================================== */
@import url('./custom-crm/customization/input-master.css');
@import url('./custom-crm/customization/module-master.css');
@import url('./custom-crm/customization/section-master.css');
@import url('./custom-crm/customization/custom-field-master.css');

/* ===========================================
   GENERAL SETTINGS
   =========================================== */
@import url('./custom-crm/general-settings/company-settings-module.css');
@import url('./custom-crm/general-settings/personal-settings-module.css');
@import url('./custom-crm/general-settings/user-create-module.css');
@import url('./custom-crm/general-settings/user-edit-module.css');
@import url('./custom-crm/general-settings/user-list-module.css');
@import url('./custom-crm/general-settings/user-view-module.css');
@import url('./custom-crm/general-settings/user-change-password-module.css');

/* ===========================================
   RBAC (Role-Based Access Control)
   =========================================== */
@import url('./custom-crm/rbac/role.css');
@import url('./custom-crm/rbac/permission.css');
@import url('./custom-crm/rbac/assign-role-user.css');
@import url('./custom-crm/rbac/assign-permission-role.css');
@import url('./custom-crm/rbac/assign-direct-permission-user.css');

/* ===========================================
   SMTP SETTINGS
   =========================================== */
@import url('./custom-crm/smtp-setting/domain-master.css');
@import url('./custom-crm/smtp-setting/host-master.css');
@import url('./custom-crm/smtp-setting/port-master.css');
@import url('./custom-crm/smtp-setting/mailer-master.css');
@import url('./custom-crm/smtp-setting/setting-master.css');
@import url('./custom-crm/smtp-setting/email-setting.css');

/* ===========================================
   DATA ADMINISTRATION
   =========================================== */
@import url('./custom-crm/data-administration/file-export.css');
@import url('./custom-crm/data-administration/file-export-list.css');
@import url('./custom-crm/data-administration/import-setting.css');
@import url('./custom-crm/data-administration/import-upload.css');
@import url('./custom-crm/data-administration/import-mapping.css');
@import url('./custom-crm/data-administration/recycle-bin.css');

/* ===========================================
   DEVELOPER HUB
   =========================================== */
@import url('./custom-crm/developer-hub/log-activity.css');
@import url('./custom-crm/developer-hub/log-error.css');