:root {--primary:#8e44ad; --primary-dark:#7d3c98; --secondary:#3498db; --success:#27ae60; --danger:#e74c3c; --warning:#f39c12; --info:#17a2b8; --orange:#dd7700; --dark:#2c3e50; --light:#ecf0f1; --gray:#95a5a6; --border:#bdc3c7; --shadow:0 2px 10px rgba(0,0,0,0.1);}
* {margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
body {background-color:#f5f7fa; color:#333; overflow-x:hidden; font-family:'Roboto Condensed', sans-serif;}
/* Header Styles */
.header {background: linear-gradient(135deg, var(--dark), var(--gray));color: white;padding: 15px 20px;display: flex;justify-content: space-between;align-items: center;box-shadow: var(--shadow);position: sticky;top: 0;z-index: 1000;}
.logo {font-size: 24px;font-weight: bold;display: flex;align-items: center;gap: 10px;}
.user-info {display: flex;align-items: center;gap: 15px;}
/* Navigation */
.main-nav {background-color: var(--orange);display: flex;padding: 0 20px;position: sticky;top: 68px;z-index: 999;overflow-x: auto;}
.nav-item {padding: 12px 20px;color: var(--light);cursor: pointer;transition: all 0.3s;position: relative;display: flex;align-items: center;gap: 8px;white-space: nowrap;border-bottom: 3px solid transparent;}
.nav-item:hover {background-color: #ff9900;}
.nav-item.active {background-color: #ff9900;border-bottom-color: var(--orange);}
.nav-item .badge {background: var(--danger);color: white;border-radius: 10px;padding: 2px 8px;font-size: 12px;margin-left: 5px;}
.badge {background: var(--danger);color: white;border-radius: 10px;padding: 2px 8px;font-size: 11px;margin-left: 5px;}
/* Tab System */
.tab-container {margin: 0 20px;position: relative;}
.tab-bar {display: flex;background-color: var(--light);border-bottom: 1px solid var(--border);padding: 5px 5px 0 5px;overflow-x: auto;position: sticky;top: 118px;z-index: 998;}
.tab {padding: 10px 20px;background-color: var(--light);border: 1px solid var(--border);border-bottom: none;border-radius: 5px 5px 0 0;margin-right: 5px;cursor: pointer;display: flex;align-items: center;max-width: 200px;min-width: 150px;transition: all 0.3s;}
.tab.active {background-color: white;border-bottom: 1px solid white;margin-bottom: -1px;}
.tab.saved .tab-title::before {content: "● ";color: var(--success);font-size: 16px;}
.tab.unsaved .tab-title::before {content: "● ";color: var(--warning);font-size: 16px;}
.tab-title {flex-grow: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.tab-close {margin-left: 8px;color: var(--gray);font-weight: bold;cursor: pointer;padding: 2px;border-radius: 3px;transition: all 0.3s;}
.tab-close:hover {background-color: var(--danger);color: white;}
/* Content Area */
.tab-content-area {background-color: white;border: 1px solid var(--border);border-top: none;min-height: 500px;box-shadow: 0 2px 5px rgba(0,0,0,0.05);}
.tab-content {display: none;padding: 20px;animation: fadeIn 0.3s ease-in;}
@keyframes fadeIn {from { opacity: 0; transform: translateY(10px); }to { opacity: 1; transform: translateY(0); }}
.tab-content.active {display: block;}
/* Modal Styles */
.modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.5);display: flex;align-items: center;justify-content: center;z-index: 10000;}
/* Modal Base Styles */
.modal-overlay.active {opacity: 1;visibility: visible;}
.modal-content {background: white;border-radius: 8px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);width: 90%;max-width: 500px;transform: translateY(-50px) scale(0.95);opacity: 0;transition: all 0.3s ease;max-height: 90vh;overflow-y: auto;position: relative;}
.modal-content.active {transform: translateY(0) scale(1);opacity: 1;}
/* Modal Sizes - Gunakan !important untuk override */
.modal-content.modal-sm {max-width: 400px !important;width: 90% !important;}
.modal-content.modal-lg {max-width: 800px !important;width: 90% !important;}
.modal-content.modal-xl {max-width: 1140px !important;width: 95% !important;}
.modal-content.modal-full {max-width: 95vw !important;width: 95% !important;height: 95vh;}
/* Modal Header */
.modal-header {display: flex;justify-content: space-between;align-items: center;padding: 10px;border-bottom: 1px solid #ddd;background: #f8f9fa;border-radius: 8px 8px 0 0;}
.modal-header h3 {margin: 0;color: #333;font-size: 18px;}
.modal-close {background: none;border: none;font-size: 24px;cursor: pointer;color: #666;padding: 0;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;border-radius: 50%;}
.modal-close:hover {background: #e9ecef;color: #333;}
/* Modal Body */
.modal-body {padding: 10px;max-height: calc(90vh - 140px);overflow-y: auto;}
/* Modal Header */
.modal-footer {display: flex;justify-content: space-between;align-items: center;padding: 10px;border-top: 1px solid #ddd;border-radius: 0 0 8px 8px;}
/* Responsive */
@media (max-width: 768px) {
    .modal-overlay {padding: 0px;}
    .modal-content {width: 95% !important;max-width: 95% !important;}
    .modal-content.modal-sm,.modal-content.modal-lg,.modal-content.modal-xl,.modal-content.modal-full {width: 95% !important;max-width: 95% !important;}
}
/* Form Styles */
.form-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 20px;margin: 20px 0;}
.form-group {margin-bottom: 15px;}label {display: block;margin-bottom: 5px;font-weight: 500;color: var(--dark);}
.required label::after {content: " *";color: var(--danger);}input, select, textarea {width: 100%;padding: 10px;border: 1px solid var(--border);border-radius: 4px;font-size: 14px;transition: all 0.3s;}input:focus, select:focus, textarea:focus {border-color: var(--primary);outline: none;box-shadow: 0 0 0 2px rgba(142, 68, 173, 0.2);}input.error, select.error, textarea.error {border-color: var(--danger);box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);}
.error-message {color: var(--danger);font-size: 12px;margin-top: 5px;display: block;}
/* Buttons */
.btn {background-color: var(--primary);color: white;border: none;padding: 10px 15px;border-radius: 4px;cursor: pointer;font-size: 14px;transition: all 0.3s;display: inline-flex;align-items: center;gap: 5px;text-decoration: none;}
.btn:hover {background-color: var(--primary-dark);transform: translateY(-1px);box-shadow: 0 4px 8px rgba(0,0,0,0.1);}
.btn-secondary {background-color: var(--secondary);}
.btn-success {background-color: var(--success);}
.btn-danger {background-color: var(--danger);}
.btn-warning {background-color: var(--warning);}
.btn-info {background-color: var(--info);}
.btn-outline {background-color: transparent;border: 1px solid var(--primary);color: var(--primary);}
.btn-outline:hover {background-color: var(--primary);color: white;}
.btn-sm {padding: 5px 10px;font-size: 12px;}
/* Table Styles */
.table-container {overflow-x: auto;margin: 20px 0;border-radius: 5px;border: 1px solid var(--border);}table {width: 100%;border-collapse: collapse;}th, td {padding: 12px 15px;text-align: left;border-bottom: 1px solid var(--light);}th {background-color: #f8f9fa;font-weight: 600;position: sticky;top: 0;}tr:hover {background-color: #f8f9fa;}
/* Dashboard Cards */
.card-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap: 20px;margin: 20px 0;}
.card {background: white;border-radius: 8px;padding: 20px;box-shadow: var(--shadow);transition: transform 0.3s;border-left: 4px solid var(--primary);}
.card:hover {transform: translateY(-5px);}
.card h3 {color: var(--dark);margin-bottom: 10px;font-size: 16px;}
.card .value {font-size: 24px;font-weight: bold;margin: 10px 0;}
.card .trend {font-size: 14px;display: flex;align-items: center;gap: 5px;}
.trend.up {color: var(--success);}
.trend.down {color: var(--danger);}
/* Charts */
.chart-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));gap: 20px;margin: 30px 0;}
.chart-card {background: white;border-radius: 8px;padding: 20px;box-shadow: var(--shadow);border: 1px solid #e0e0e0;}
.chart-card h3 {color: var(--dark);margin-bottom: 15px;font-size: 16px;display: flex;align-items: center;gap: 8px;}
.chart-container {position: relative;height: 200px;width: 100%;}
/* DataTables Customization */
.dataTables_wrapper {margin: 20px 0;}
.dataTables_filter input {border: 1px solid var(--border) !important;padding: 5px 10px !important;border-radius: 4px !important;}
.dataTables_length select {border: 1px solid var(--border) !important;padding: 5px !important;border-radius: 4px !important;}
/* Notification System */
.notification {position: fixed;top: 20px;right: 20px;background: white;padding: 15px 20px;border-radius: 5px;box-shadow: var(--shadow);border-left: 4px solid var(--info);display: flex;align-items: center;gap: 10px;transform: translateX(400px);transition: transform 0.3s ease;z-index: 9999;max-width: 400px;}
.notification.show {transform: translateX(0);}
.notification-success {border-left-color: var(--success);}
.notification-error {border-left-color: var(--danger);}
.notification-warning {border-left-color: var(--warning);}
.notification-close {background: none;border: none;font-size: 16px;cursor: pointer;color: var(--gray);}
/* BHP Specific Styles */
.stock-critical { background-color: #ffeaea !important; }
.stock-warning { background-color: #fff4e6 !important; }
.stock-good { background-color: #f0fff4 !important; }
.bhp-quick-actions {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 15px;margin: 20px 0;}
.bhp-action-card {background: white;padding: 15px;border-radius: 8px;box-shadow: var(--shadow);border-left: 4px solid var(--info);text-align: center;cursor: pointer;transition: all 0.3s;}
.bhp-action-card:hover {transform: translateY(-3px);box-shadow: 0 6px 12px rgba(0,0,0,0.15);}
.bhp-action-card i {font-size: 24px;margin-bottom: 10px;color: var(--primary);}
/* Utility Classes */
.flex-between {display: flex;justify-content: space-between;align-items: center;}
.flex-end {display: flex;justify-content: flex-end;align-items: center;gap: 10px;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.mt-20 {margin-top: 20px;}
.mb-20 {margin-bottom: 20px;}
.p-20 {padding: 20px;}
/* Dark Mode */
.dark-mode {--primary: #9b59b6;--dark: #ecf0f1;--light: #2c3e50;--border: #34495e;background-color: #1a1a1a;color: #ecf0f1;}
.dark-mode .card {background: #2c3e50;color: #ecf0f1;}
.dark-mode .tab-content-area {background: #2c3e50;border-color: #34495e;}
.dark-mode .table-container {background: #2c3e50;}
.dark-mode th {background-color: #34495e;color: #ecf0f1;}
.dark-mode .modal-content {background: #2c3e50;color: #ecf0f1;}
/* Responsive */
@media (max-width: 768px) {.main-nav {flex-wrap: wrap;}.nav-item {padding: 10px 15px;font-size: 14px;}.tab {min-width: 120px;}.form-grid {grid-template-columns: 1fr;}.chart-grid {grid-template-columns: 1fr;}.card-grid {grid-template-columns: 1fr;}.bhp-quick-actions {grid-template-columns: 1fr;}}
@media (max-width: 480px) {.header {padding: 10px 15px;flex-direction: column;gap: 10px;}.main-nav {padding: 0 10px;overflow-x: auto;}.nav-item {padding: 8px 12px;font-size: 12px;}.tab {min-width: 120px;padding: 8px 12px;}.card-grid {grid-template-columns: 1fr;}.chart-grid {grid-template-columns: 1fr;}.notification {right: 10px;left: 10px;max-width: none;}}
/* Tambahkan di CSS - Treatment Specific Styles */
.treatment-category-badge {padding: 4px 8px;border-radius: 12px;font-size: 11px;font-weight: 600;text-transform: uppercase;}
.category-facial { background: #e8f4fd; color: #3498db; border: 1px solid #3498db; }
.category-laser { background: #fde8f4; color: #e74c3c; border: 1px solid #e74c3c; }
.category-injectable { background: #f0f8e8; color: #27ae60; border: 1px solid #27ae60; }
.category-body { background: #fff8e8; color: #f39c12; border: 1px solid #f39c12; }
.treatment-price {font-weight: bold;color: var(--primary);font-size: 16px;}
.treatment-duration {color: var(--gray);font-size: 12px;}
.status-active { color: var(--success); }
.status-inactive { color: var(--danger); }
/* Modal khusus treatment */
.treatment-modal-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 15px;}
.bhp-list {max-height: 200px;overflow-y: auto;border: 1px solid var(--border);border-radius: 4px;padding: 10px;}
.bhp-list-item {display: flex;justify-content: space-between;align-items: center;padding: 5px 0;border-bottom: 1px solid #f0f0f0;}
.bhp-list-item:last-child {border-bottom: none;}
/* Loading States */
.value.loading {color: #ccc;font-style: italic;}
.chart-loading {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 200px;color: #666;}
.chart-loading i {font-size: 24px;margin-bottom: 10px;color: #8e44ad;}
.trend .fa-spinner {color: #8e44ad;}
/* Summary Cards */
.card {transition: all 0.3s ease;}
.card:hover {transform: translateY(-2px);box-shadow: 0 4px 15px rgba(0,0,0,0.1);}
/* Filter Section */
.filter-section {background: #f8f9fa;border-left: 4px solid #8e44ad;}
.filter-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding-bottom: 15px;border-bottom: 1px solid #dee2e6;}
.filter-header h3 {margin: 0;color: #8e44ad;}
/* Badges */
.payment-badge {padding: 4px 8px;border-radius: 12px;font-size: 11px;font-weight: 600;}
.payment-badge.tunai { background: #e8f5e8; color: #27ae60; }
.payment-badge.transfer { background: #e3f2fd; color: #1976d2; }
.payment-badge.kartu-kredit { background: #fff3e0; color: #f57c00; }
.payment-badge.debit { background: #f3e5f5; color: #7b1fa2; }
.status-badge {padding: 4px 8px;border-radius: 12px;font-size: 11px;font-weight: 600;}
.status-badge.status-completed { background: #e8f5e8; color: #27ae60; }
.status-badge.status-pending { background: #fff3e0; color: #f57c00; }
.status-badge.status-cancelled { background: #ffebee; color: #e74c3c; }
/* Report Sections */
.report-section {animation: fadeIn 0.3s ease-in;}
@keyframes fadeIn {from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); }}
/* Loading States */
.value.loading {color: #6c757d;font-style: italic;}
.text-right {text-align: right;}
/* Responsive */
@media (max-width: 768px) {.filter-section .form-grid {grid-template-columns: 1fr;}.filter-header {flex-direction: column;gap: 10px;align-items: flex-start;}}
/* Therapist Report Styles */
.therapist-info {line-height: 1.4;}
.therapist-name {font-weight: 600;color: #333;}
.therapist-contact {font-size: 11px;color: #666;}
.therapist-rating {display: flex;align-items: center;gap: 5px;justify-content: center;}
.therapist-rating i {color: #f39c12;font-size: 12px;}
.therapist-rating small {color: #666;font-size: 10px;}
.popular-service {background: #e3f2fd;color: #1976d2;padding: 4px 8px;border-radius: 12px;font-size: 11px;font-weight: 500;}
/* Transaction Detail Styles */
.transaction-detail {max-height: 70vh;overflow-y: auto;}
.detail-section {margin-bottom: 25px;padding-bottom: 20px;border-bottom: 1px solid #eee;}
.detail-section:last-child {border-bottom: none;}
.detail-section h4 {margin: 0 0 15px 0;color: #8e44ad;font-size: 16px;}
.detail-section h4 i {margin-right: 8px;}
.detail-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 15px;}
.detail-item {display: flex;flex-direction: column;}
.detail-item label {font-weight: 600;color: #666;font-size: 12px;margin-bottom: 5px;}
.detail-item span {padding: 8px 0;color: #333;}
.invoice-number {font-weight: bold;color: #8e44ad;font-size: 16px;}
/* Services Table in Detail */
.services-table {margin-top: 15px;}
.services-table table {width: 100%;border-collapse: collapse;font-size: 13px;}
.services-table th,
.services-table td {border: 1px solid #ddd;padding: 10px;text-align: left;}
.services-table th {background-color: #f8f9fa;font-weight: 600;}
.service-name {font-weight: 500;}
.service-notes {font-size: 11px;color: #666;margin-top: 4px;font-style: italic;}
/* Payment Summary */
.payment-summary {max-width: 300px;margin-left: auto;}
.summary-row {display: flex;justify-content: space-between;padding: 8px 0;border-bottom: 1px solid #eee;}
.summary-row.total {border-top: 2px solid #333;border-bottom: none;font-weight: bold;font-size: 16px;margin-top: 10px;padding-top: 15px;}
.summary-row.discount {color: #e74c3c;}
.summary-row.remaining {color: #f39c12;font-weight: 500;}
/* Detail Actions */
.detail-actions {display: flex;gap: 10px;justify-content: flex-end;margin-top: 25px;padding-top: 20px;border-top: 1px solid #eee;}
/* No Data State */
.no-data {text-align: center;padding: 40px;color: #666;}
.no-data i {font-size: 48px;margin-bottom: 15px;color: #ccc;}
/* Responsive */
@media (max-width: 768px) {.detail-grid {grid-template-columns: 1fr;}.detail-actions {flex-direction: column;}.payment-summary {max-width: 100%;}}