/* Frosted-glass blur layer behind group boxes (screen-space rects, positioned by JS) */
#group-blur-layer rect { pointer-events: none; }

/* Table Group Box */
.table-group { cursor: move; }
.table-group-box {
    fill: var(--accent-color);
    fill-opacity: 0.12;
    stroke: var(--accent-color);
    stroke-width: 1.5;
    pointer-events: stroke;
}
.table-group-label-bg {
    fill: var(--accent-color, #6366f1);
    pointer-events: all;
}
.table-group-label {
    font-family: 'Google Sans Code', monospace;
    font-size: 14px;
    font-weight: 600;
    fill: #fff;
    dominant-baseline: central;
    pointer-events: all;
    user-select: none;
}

/* Toggle button — uses accent color for visibility in both themes */
.table-group-toggle-bg {
    fill: var(--accent-color, #6366f1);
    opacity: 0.8;
    cursor: pointer;
    pointer-events: all;
}
.table-group-toggle-bg:hover {
    opacity: 1;
}
.table-group-toggle-icon {
    font-size: 14px;
    fill: #fff;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: all;
    cursor: pointer;
    user-select: none;
}

/* Collapsed group — interior draggable (tint is shared with expanded groups) */
.table-group-collapsed .table-group-box {
    pointer-events: all;
}

/* Selected group highlight */
.table-group-selected .table-group-box {
    stroke-width: 3;
    filter: drop-shadow(0 0 6px var(--accent-color, #6366f1));
}

/* Table Entity Styles */

.table-entity {
    cursor: move;
    filter: drop-shadow(0 4px 8px var(--shadow-color));
}

.table-entity.selected {
    filter: drop-shadow(0 0 0 2px var(--accent-color)) drop-shadow(0 4px 12px var(--shadow-color));
}

.table-entity.highlighted {
    filter: drop-shadow(0 0 8px var(--highlight-border)) drop-shadow(0 4px 8px var(--shadow-color));
}

/* Table Container */
.table-container {
    fill: var(--table-bg);
    stroke: var(--table-border);
    stroke-width: 1;
    rx: 8;
    ry: 8;
}

.table-entity.selected .table-container {
    stroke: var(--accent-color);
    stroke-width: 2;
}

.table-entity.highlighted .table-container {
    stroke: var(--highlight-border);
    stroke-width: 2;
}

/* Table Header */
.table-header {
    fill: var(--table-header-bg);
    rx: 8;
    ry: 8;
}

.table-header-bottom {
    fill: var(--table-header-bg);
}

.table-name {
    font-family: 'Google Sans Code', monospace;
    font-size: 14px;
    font-weight: 600;
    fill: var(--text-primary);
    pointer-events: none;
    dominant-baseline: middle;
}

.table-description {
    font-family: 'Google Sans Code', monospace;
    font-size: 14px;
    fill: var(--text-muted);
    pointer-events: none;
}

/* Table Actions */
.table-actions {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.table-entity:hover .table-actions {
    opacity: 1;
}

.table-action-btn {
    fill: var(--bg-tertiary);
    stroke: var(--border-color);
    stroke-width: 1;
    rx: 4;
    ry: 4;
    cursor: pointer;
    transition: fill 0.15s ease;
}

.table-action-btn:hover {
    fill: var(--bg-hover);
}

.table-action-icon {
    font-family: 'Google Sans Code', monospace;
    font-size: 14px;
    fill: var(--text-secondary);
    pointer-events: none;
    text-anchor: middle;
    dominant-baseline: central;
}

/* Table Divider */
.table-divider {
    stroke: var(--table-border);
    stroke-width: 1;
}

/* Field Rows */
.field-row {
    cursor: pointer;
    transition: fill 0.1s ease;
}

.field-row:hover {
    fill: var(--table-field-hover);
}

.field-row.highlighted {
    fill: var(--highlight-color);
}

.field-row.dragging {
    opacity: 0.7;
}

/* Field Content */
.field-name {
    font-family: 'Google Sans Code', monospace;
    font-size: 14px;
    fill: var(--text-primary);
    pointer-events: none;
    dominant-baseline: middle;
}

.field-type {
    font-family: 'Google Sans Code', monospace;
    font-size: 14px;
    fill: var(--text-muted);
    pointer-events: none;
    dominant-baseline: middle;
}

.field-comment {
    font-family: 'Google Sans Code', monospace;
    font-size: 14px;
    fill: var(--text-muted);
    font-style: italic;
    pointer-events: none;
}

/* Key Indicators */
.key-indicator {
    font-family: 'Google Sans Code', monospace;
    font-size: 14px;
    font-weight: 700;
    pointer-events: none;
    dominant-baseline: middle;
}

.key-indicator.pk {
    fill: var(--pk-color);
}

.key-indicator.fk {
    fill: var(--fk-color);
}

/* Sensitivity Badge */
.sensitivity-badge {
    rx: 3;
    ry: 3;
}

.sensitivity-badge.low {
    fill: var(--sensitivity-low);
}

.sensitivity-badge.medium {
    fill: var(--sensitivity-medium);
}

.sensitivity-badge.high {
    fill: var(--sensitivity-high);
}

.sensitivity-badge.pii {
    fill: var(--sensitivity-pii);
}

.sensitivity-text {
    font-family: 'Google Sans Code', monospace;
    font-size: 14px;
    fill: white;
    font-weight: 600;
    pointer-events: none;
    text-anchor: middle;
    dominant-baseline: central;
}

/* Connection Handle */
.connection-handle {
    fill: var(--accent-color);
    stroke: var(--bg-primary);
    stroke-width: 2;
    cursor: crosshair;
    opacity: 0;
    transition: opacity 0.15s ease, r 0.15s ease;
}

.field-row:hover .connection-handle {
    opacity: 1;
}

.connection-handle:hover {
    r: 8;
}

/* Resize Handle */
.resize-handle {
    fill: var(--border-color);
    cursor: ns-resize;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.table-entity:hover .resize-handle {
    opacity: 1;
}

.resize-handle:hover {
    fill: var(--accent-color);
}

/* Table Height Resize Handle */
.table-resize-handle {
    opacity: 0;
    transition: opacity 0.15s ease, fill 0.15s ease;
}

.table-entity:hover .table-resize-handle {
    opacity: 1;
}

.table-resize-handle:hover {
    fill: var(--accent-color) !important;
    opacity: 0.5;
}

/* Table Edit Button */
.table-edit-btn {
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.table-entity:hover .table-edit-btn {
    opacity: 1;
}

.table-edit-btn rect {
    fill: var(--bg-tertiary);
    stroke: var(--border-color);
    stroke-width: 1;
}

.table-edit-btn:hover rect {
    fill: var(--bg-hover);
}

.table-edit-icon {
    pointer-events: none;
    color: var(--text-secondary);
    overflow: visible;
}

/* Collapse/Expand Toggle */
.collapse-toggle {
    fill: var(--bg-tertiary);
    stroke: var(--border-color);
    stroke-width: 1;
    rx: 4;
    ry: 4;
    cursor: pointer;
    transition: fill 0.15s ease;
}

.collapse-toggle:hover {
    fill: var(--bg-hover);
}

.collapse-toggle.is-expanded > rect {
    fill: var(--accent-color, #6366f1);
}

.collapse-toggle.is-collapsed > rect {
    fill: var(--bg-tertiary);
}

.collapse-toggle.is-expanded .collapse-icon {
    fill: #fff;
}

.collapse-icon {
    font-family: 'Google Sans Code', monospace;
    font-size: 14px;
    fill: var(--text-secondary);
    pointer-events: none;
    text-anchor: middle;
    dominant-baseline: central;
}

/* Scroll Indicator */
.scroll-indicator {
    fill: var(--border-color);
    rx: 2;
    ry: 2;
    opacity: 0.5;
}

.scroll-track {
    fill: var(--bg-tertiary);
    rx: 2;
    ry: 2;
}

/* Add Field Button */
.add-field-btn {
    fill: transparent;
    cursor: pointer;
    transition: fill 0.15s ease;
}

.add-field-btn:hover {
    fill: var(--table-field-hover);
}

.add-field-text {
    font-family: 'Google Sans Code', monospace;
    font-size: 14px;
    fill: var(--text-muted);
    pointer-events: none;
}

.add-field-btn:hover .add-field-text {
    fill: var(--accent-color);
}