/**
 * @fileoverview Styles cho Viewer Toolbar
 */

/**
 * @fileoverview Styles cho Viewer Toolbar
 */
.viewer-toolbar { display: flex; flex-direction: column; gap: 6px; z-index: 100; }
#viewer-toolbar-container { position: absolute; top: 16px; left: 16px; z-index: 100; }
.viewer-toolbar-btn { width: 40px; height: 40px; padding: 0; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-surface); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; box-shadow: var(--shadow); -webkit-user-select: none; user-select: none; }
.viewer-toolbar-btn:hover { background: var(--bg-hover); box-shadow: var(--shadow-lg); }
.viewer-toolbar-btn.active { background: var(--color-primary-light); border-color: var(--color-primary); }
.viewer-toolbar-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.viewer-toolbar-icon svg { width: 100%; height: 100%; }
.measurement-cancel { position: absolute; top: -45px; left: 50%; transform: translateX(-50%); background: var(--color-danger); color: white; padding: 8px 16px; border-radius: 4px; font-size: var(--font-size-base); font-weight: 500; cursor: pointer; z-index: 1001; display: none; border: none; box-shadow: var(--shadow-lg); white-space: nowrap; }
.measurement-cancel:hover { background: var(--color-danger-dark); }
.measurement-cancel.visible { display: block; }
.btn-save-view { margin: 12px 16px; padding: 8px 16px; background: var(--measurement-purple); color: var(--bg-surface); border: none; border-radius: 4px; cursor: pointer; font-size: var(--font-size-base); font-weight: 500; transition: background 0.2s; }
.btn-save-view:hover { background: var(--measurement-purple-dark); }
.views-list-panel { flex: 1; overflow-y: auto; padding: 0 16px 16px; }
.view-item { margin-bottom: 12px; border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; transition: box-shadow 0.2s; }
.view-item:hover { box-shadow: var(--shadow); }
.view-thumbnail { width: 100%; height: 120px; object-fit: contain; background: var(--gray-900); border-radius: 4px; margin-bottom: 8px; }
.view-thumbnail-placeholder { width: 100%; height: 120px; background: var(--gray-100); border-radius: 4px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; color: var(--gray-400); }
.view-item-content { padding: 8px 12px; }
.view-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.view-item-name { font-weight: 600; font-size: var(--font-size-base); color: var(--gray-700); }
.view-item-annotation-badge { font-size: var(--font-size-xs); background: var(--color-success-bg); color: var(--color-success); padding: 2px 6px; border-radius: 4px; }
.view-item-date { font-size: var(--font-size-xs); color: var(--gray-400); margin-bottom: 8px; }
.view-item-actions { display: flex; gap: 8px; }
.btn-load-view { flex: 1; padding: 6px 12px; background: var(--measurement-purple); color: var(--bg-surface); border: none; border-radius: 4px; cursor: pointer; font-size: var(--font-size-base); transition: background 0.2s; }
.btn-load-view:hover { background: var(--measurement-purple-dark); }
.btn-delete-view { padding: 6px 12px; background: var(--color-danger); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: var(--font-size-base); transition: background 0.2s; }
.btn-delete-view:hover { background: var(--color-danger-dark); }
.views-empty-state { text-align: center; padding: 30px; color: var(--gray-500); }
.views-empty-state p { margin: 0; }
.views-empty-state .hint { margin: 8px 0 0; font-size: var(--font-size-base); }
.measurement-label { position: absolute; background: rgba(0, 0, 0, 0.8); color: white; padding: 4px 8px; border-radius: 4px; font-size: var(--font-size-base); font-weight: 500; pointer-events: none; z-index: 1000; white-space: nowrap; transform: translate(-50%, -50%); }
.measurement-label.area { background: var(--color-primary); }
.measurement-label.length { background: var(--color-success); }
.viewer-center-3d.measurement-blocked { cursor: not-allowed !important; outline: 3px solid red !important; outline-offset: -3px; }