→ title + subtitle *

→ action buttons *

→ rounded card for content * → styled table *

→ row action icon buttons *

→ filter panel * ============================================================================= */ /* ─── Page Background ───────────────────────────────────────────────────────── */ body { background-color: var(--tm-bg-page, #f8fafc) !important; } /* ─── Page Wrapper ──────────────────────────────────────────────────────────── */ .tm-page-wrapper { padding: 8px 0 0 0; } /* ─── Page Header ───────────────────────────────────────────────────────────── */ .tm-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; background: transparent; } .tm-page-title h4, .tm-page-title h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 2px; color: #111827; font-family: var(--tm-font-display, inherit); } .tm-page-title p { margin: 0; font-size: 0.75rem; color: #6b7280; } .tm-page-title .tm-page-icon { margin-right: 8px; font-size: 1.2rem; color: var(--tm-brand-purple, #7C3AED); } /* ─── Page Actions (button row) ─────────────────────────────────────────────── */ .tm-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; justify-content: flex-end; white-space: nowrap; height: 36px; } .tm-page-actions .btn { border-radius: 999px; font-size: 0.8rem; padding: 6px 12px; white-space: nowrap; flex-shrink: 0; height: 36px; display: flex; align-items: center; justify-content: center; line-height: 1; } .tm-page-actions .btn-primary, .tm-page-actions .btn-tm-primary { background-color: var(--tm-brand-purple, #7C3AED) !important; border-color: var(--tm-brand-purple, #7C3AED) !important; box-shadow: 0 8px 16px rgba(131, 27, 238, 0.2); color: #ffffff !important; } .tm-page-actions .btn-primary:hover, .tm-page-actions .btn-tm-primary:hover { background-color: var(--tm-brand-purple-dark, #6b21a8) !important; border-color: var(--tm-brand-purple-dark, #6b21a8) !important; } .tm-page-actions .btn-outline-secondary { border-color: #e5e7eb; color: #374151; background-color: #ffffff; } .tm-page-actions .btn-outline-secondary:hover { background-color: #f3f4ff; border-color: var(--tm-brand-purple, #7C3AED); color: #111827; } .tm-page-actions .btn-icon { background-color: #eef2ff; border-color: #e5e7eb; color: #4b5563; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; min-width: 36px; border-radius: 999px; } .tm-page-actions .btn-icon:hover { background-color: #e0e7ff; color: #111827; } /* ─── Search Input ──────────────────────────────────────────────────────────── */ .tm-page-search { position: relative; min-width: 240px; flex-shrink: 0; height: 36px; display: flex; align-items: center; } .tm-page-search input { border-radius: 999px; border: 1px solid #d1d5db; padding: 6px 12px 6px 36px; font-size: 0.8rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); height: 36px; line-height: 1.5; width: 100%; } .tm-page-search input:focus { outline: none; border-color: var(--tm-brand-purple, #7C3AED); box-shadow: 0 0 0 1px rgba(131, 27, 238, 0.15); } .tm-page-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 0.9rem; z-index: 1; pointer-events: none; } /* ─── Page Card (content container) ─────────────────────────────────────────── */ .tm-page-card { border: none; border-radius: 16px; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06); overflow: hidden; background-color: #ffffff; margin-bottom: 20px; } .tm-page-card .card-body { padding: 0; } .tm-page-card .table-responsive { padding: 8px 16px 12px 16px; } /* ─── Table Styles ──────────────────────────────────────────────────────────── */ .tm-table { border-collapse: separate; border-spacing: 0; } /* Table Header */ .tm-table thead th, .tm-table thead th.sorting, .tm-table thead th.sorting_asc, .tm-table thead th.sorting_desc { background-color: var(--tm-table-header-bg, #7C3AED) !important; color: var(--tm-table-header-color, #ffffff) !important; font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 12px; border-bottom: none; border-top: none; line-height: 1.4; } .tm-table thead th.sorting:after, .tm-table thead th.sorting_asc:after, .tm-table thead th.sorting_desc:after { color: var(--tm-table-header-color, #ffffff) !important; opacity: 0.8; } /* First and last header cell rounded corners */ .tm-table thead th:first-child { border-top-left-radius: var(--tm-radius-sm, 6px); } .tm-table thead th:last-child { border-top-right-radius: var(--tm-radius-sm, 6px); } /* Table Body */ .tm-table tbody td { padding: 8px 12px; font-size: 0.8rem; border-bottom: 1px solid #e5e7eb; vertical-align: middle; background-color: #ffffff; line-height: 1.5; } .tm-table tbody tr:last-child td { border-bottom: none; } .tm-table tbody tr:hover { background-color: #f9fafb; } .tm-table tbody tr:hover td { background-color: #f9fafb; } .tm-table tbody td strong { font-size: 0.8rem; font-weight: 600; } .tm-table tbody td small { font-size: 0.7rem; } /* ─── Table Action Buttons (icon row per row) ────────────────────────────────── */ .tm-table-actions { white-space: nowrap; display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; justify-content: flex-start; } .tm-table-actions .btn { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid var(--tm-table-header-bg, #7C3AED); background-color: #ffffff; color: var(--tm-table-header-bg, #7C3AED); transition: all 0.2s ease; } .tm-table-actions .btn:hover { background-color: var(--tm-table-header-bg, #7C3AED); color: #ffffff; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(131, 27, 238, 0.3); } .tm-table-actions .btn i { font-size: 0.75rem; color: inherit; } .tm-table-actions .btn-danger, .tm-table-actions .btn-delete { border-color: var(--tm-danger, #ef4444); color: var(--tm-danger, #ef4444); } .tm-table-actions .btn-danger:hover, .tm-table-actions .btn-delete:hover { background-color: var(--tm-danger, #ef4444); color: #ffffff; box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3); } /* ─── DataTables Integration ────────────────────────────────────────────────── */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { padding: 8px 16px 0 16px; } .dataTables_wrapper .dataTables_info { padding: 6px 16px 12px 16px; font-size: 0.75rem; color: #6b7280; } .dataTables_wrapper .dataTables_paginate { padding: 6px 16px 12px 16px; float: right; } .dataTables_wrapper .dataTables_length select { min-width: 70px; width: auto; border-radius: 999px; padding: 3px 8px; font-size: 0.75rem; height: 28px; } .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { font-size: 0.75rem; margin-bottom: 0; } .dataTables_wrapper .dataTables_filter input { font-size: 0.75rem; padding: 3px 8px; height: 28px; } /* Pagination */ .dataTables_wrapper .pagination .page-link { border-radius: 6px; font-size: 0.75rem; padding: 6px 12px; min-width: 36px; height: 32px; line-height: 20px; border: 1px solid #d1d5db; background-color: #ffffff; color: #6b7280; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; } .dataTables_wrapper .pagination .page-item { background: transparent; border: none; margin: 0 2px; } .dataTables_wrapper .pagination .page-link:hover { background-color: #f9fafb; border-color: #9ca3af; color: #374151; } .dataTables_wrapper .pagination .page-item.disabled .page-link { background-color: #f3f4f6; border-color: #e5e7eb; color: #9ca3af; cursor: not-allowed; opacity: 0.7; } .dataTables_wrapper .pagination .page-item.active .page-link { background-color: var(--tm-table-header-bg, #7C3AED) !important; border-color: var(--tm-table-header-bg, #7C3AED) !important; color: var(--tm-table-header-color, #ffffff) !important; font-weight: 500; } .dataTables_wrapper .pagination .page-item.active .page-link:hover { background-color: var(--tm-brand-purple-dark, #6b21a8) !important; border-color: var(--tm-brand-purple-dark, #6b21a8) !important; } /* Legacy paginate_button (non-Bootstrap DataTables) */ .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 6px; font-size: 0.75rem; padding: 6px 12px; margin: 0 2px; border: 1px solid #d1d5db; background-color: #ffffff; color: #6b7280; cursor: pointer; display: inline-block; text-align: center; min-width: 36px; height: 32px; line-height: 20px; box-sizing: border-box; transition: all 0.2s ease; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background-color: var(--tm-table-header-bg, #7C3AED) !important; border-color: var(--tm-table-header-bg, #7C3AED) !important; color: var(--tm-table-header-color, #ffffff) !important; font-weight: 500; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background-color: #f9fafb; border-color: #9ca3af; color: #374151; } .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { background-color: #f3f4f6; border-color: #e5e7eb; color: #9ca3af; cursor: not-allowed; opacity: 0.7; } /* ─── Filter Section ────────────────────────────────────────────────────────── */ .tm-filter-section { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); padding: 16px 20px; border-radius: 10px; margin-bottom: 16px; border: 1px solid #e5e7eb; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .tm-filter-section .row { margin-left: -8px; margin-right: -8px; } .tm-filter-section .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; } .tm-filter-section .form-group { margin-bottom: 0; } .tm-filter-section label { font-size: 0.75rem; font-weight: 600; color: #374151; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .tm-filter-section .form-control, .tm-filter-section .form-control-sm, .tm-filter-section select.form-control-sm { border-radius: 8px; border: 1.5px solid #d1d5db; font-size: 0.8rem; padding: 8px 12px; height: 38px; background-color: #ffffff; color: #1f2937; transition: all 0.2s ease; font-weight: 500; } .tm-filter-section .form-control:hover, .tm-filter-section .form-control-sm:hover { border-color: #9ca3af; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .tm-filter-section .form-control:focus, .tm-filter-section .form-control-sm:focus { border-color: var(--tm-brand-purple, #7C3AED); box-shadow: 0 0 0 3px rgba(131, 27, 238, 0.1); outline: none; background-color: #ffffff; } /* ─── Status Badges ─────────────────────────────────────────────────────────── */ .tm-status-badge { padding: 3px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 500; color: white; text-transform: uppercase; display: inline-block; line-height: 1.2; } .tm-status-new { background-color: #3b82f6; } .tm-status-active { background-color: var(--tm-success, #10b981); } .tm-status-converted { background-color: #059669; } .tm-status-closed { background-color: #6b7280; } .tm-status-lost { background-color: var(--tm-danger, #ef4444); } .tm-status-pending { background-color: var(--tm-warning, #f59e0b); color: #000; } /* ─── Premium Modal Headers ─────────────────────────────────────────────────── */ .tm-modal-header { background-color: var(--tm-brand-dark, #1e2339) !important; color: #ffffff !important; border-bottom: none; padding: 12px 20px; border-radius: 0; } .tm-modal-header .modal-title { color: #ffffff; font-size: 1rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; } .tm-modal-header .modal-title i { font-size: 1rem; color: #ffffff; } .tm-modal-header .close, .tm-modal-close { color: #ffffff; opacity: 0.9; font-size: 1.5rem; font-weight: 300; line-height: 1; padding: 0; margin: 0; background: transparent; border: none; } .tm-modal-header .close:hover, .tm-modal-close:hover { opacity: 1; color: #ffffff; } /* ─── Contact Info (table cells with name/email/phone) ───────────────────────── */ .tm-contact-info { max-width: 200px; word-wrap: break-word; gap: 2px; line-height: 1.4; } .tm-contact-info strong { font-size: 0.8rem; display: block; margin-bottom: 2px; } .tm-contact-info small { font-size: 0.75rem; display: block; line-height: 1.3; } .tm-contact-info a { color: #3b82f6; text-decoration: none; font-size: 0.75rem; } .tm-contact-info a:hover { text-decoration: underline; color: #2563eb; } /* ─── Empty States ──────────────────────────────────────────────────────────── */ .tm-empty-state { text-align: center; padding: 40px; color: #6c757d; } .tm-empty-state i { font-size: 3rem; margin-bottom: 16px; color: #d1d5db; display: block; } .tm-empty-state p { font-size: 0.875rem; margin: 0; } /* ─── Responsive ────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .tm-page-header { flex-direction: column; align-items: flex-start; } .tm-page-actions { flex-wrap: wrap; gap: 8px; width: 100%; justify-content: flex-start; } .tm-page-search { min-width: 200px; flex: 1 1 100%; } }