/**
 * ATOM: Data Table
 * Reusable spreadsheet-like table component for DentaxAI
 * Used by: patients.php (progression matrix), admin/treatments.php (diagnoses grid)
 */

/* ============================================================================
   BASE TABLE STYLES
   ============================================================================ */

.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

.data-table th,
.data-table td {
	padding: 8px 12px;
	text-align: left;
	border: 1px solid #e2e8f0;
	white-space: nowrap;
}

.data-table th {
	background: #f8fafc;
	font-weight: 600;
	color: #475569;
	position: sticky;
	top: 0;
	z-index: 3;
}

/* Sticky first column - header */
.data-table th:first-child {
	position: sticky;
	left: 0;
	z-index: 4;
	background: #f1f5f9;
}

/* Sticky first column - body cells */
.data-table td:first-child {
	position: sticky;
	left: 0;
	background: #f8fafc;
	font-weight: 600;
	color: #334155;
	z-index: 1;
}

/* Row hover effects */
.data-table tbody tr:hover td {
	background: #f1f5f9;
}

.data-table tbody tr:hover td:first-child {
	background: #e2e8f0;
}

/* ============================================================================
   CELL STATUS COLORS
   ============================================================================ */

.cell-ok {
	background: #dcfce7;
	color: #166534;
}

.cell-restored {
	background: #dbeafe;
	color: #1e40af;
}

.cell-issue {
	background: #fee2e2;
	color: #991b1b;
}

.cell-empty {
	color: #cbd5e1;
	font-style: italic;
}

.cell-changed {
	position: relative;
}

.cell-changed::after {
	content: '';
	position: absolute;
	top: 2px;
	right: 2px;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-top: 6px solid #f59e0b;
}

/* ============================================================================
   CELL INTERACTION (EDITABLE TABLES)
   ============================================================================ */

.data-table--editable td {
	cursor: pointer;
}

.data-table--editable td:hover {
	outline: 1px solid #cbd5e1;
	outline-offset: -1px;
}

/* Cell with comment indicator */
.cell-has-comment {
	cursor: pointer;
}

.cell-has-comment:hover {
	outline: 2px solid #0ea5e9;
	outline-offset: -2px;
}

.comment-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	margin-left: 4px;
	color: #64748b;
	flex-shrink: 0;
}

.cell-has-comment .comment-icon {
	color: #0ea5e9;
}

/* ============================================================================
   ADMIN TABLE MODIFIER
   ============================================================================ */

.data-table--admin th {
	background: #f1f5f9;
}

/* Inline add buttons in headers */
.data-table--admin .btn-add-col {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-left: 6px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: #e2e8f0;
	color: #64748b;
	cursor: pointer;
	font-size: 12px;
	transition: all 0.15s;
}

.data-table--admin .btn-add-col:hover {
	background: #0ea5e9;
	color: white;
}

/* Option group headers */
.data-table--admin .option-header {
	background: #e0f2fe;
	color: #0369a1;
	text-align: center;
}

.data-table--admin .option-header:nth-of-type(even) {
	background: #f0fdf4;
	color: #166534;
}

/* Step sub-headers */
.data-table--admin .step-header {
	background: #f8fafc;
	text-align: center;
	font-weight: 500;
	font-size: 11px;
}

/* Editable cell in admin mode */
.data-table--admin td.cell-editable {
	min-width: 100px;
}

.data-table--admin td.cell-editable:empty::before {
	content: '—';
	color: #cbd5e1;
}

/* Actions column */
.data-table--admin .col-actions {
	width: 60px;
	text-align: center;
}

.data-table--admin .btn-delete-row {
	padding: 4px 8px;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: #94a3b8;
	cursor: pointer;
	transition: all 0.15s;
}

.data-table--admin .btn-delete-row:hover {
	background: #fee2e2;
	color: #dc2626;
}

/* Add row button in footer */
.data-table--admin tfoot td {
	background: #fafafa;
	border-top: 2px solid #e2e8f0;
}

.data-table--admin .btn-add-row {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px dashed #cbd5e1;
	border-radius: 6px;
	background: white;
	color: #64748b;
	cursor: pointer;
	font-size: 12px;
	transition: all 0.15s;
}

.data-table--admin .btn-add-row:hover {
	border-color: #0ea5e9;
	color: #0ea5e9;
	background: #f0f9ff;
}

/* ============================================================================
   INLINE CELL EDITING
   ============================================================================ */

.data-table td.editing {
	padding: 0;
	background: white !important;
}

.data-table td.editing input,
.data-table td.editing select {
	width: 100%;
	height: 100%;
	padding: 8px 12px;
	border: 2px solid #0ea5e9;
	border-radius: 0;
	outline: none;
	font-size: 12px;
	box-sizing: border-box;
}

/* Autocomplete dropdown - positioned at body level to avoid overflow clipping */
.cell-autocomplete {
	position: fixed;
	z-index: 9999;
	background: white;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	max-height: 200px;
	overflow-y: auto;
	min-width: 200px;
}

.cell-autocomplete-item {
	padding: 8px 12px;
	cursor: pointer;
	font-size: 12px;
}

.cell-autocomplete-item:hover,
.cell-autocomplete-item.selected {
	background: #f0f9ff;
	color: #0369a1;
}

.cell-autocomplete-empty {
	padding: 8px 12px;
	color: #94a3b8;
	font-style: italic;
	font-size: 12px;
}