.relationships-diagram {
    position: relative;
    width: 100%;
    height: 600px; /* Reduzido de 800px */
    border: 1px solid #dee2e6;
    border-radius: 4px;
    overflow: auto;
    background: #f8f9fa;
}

.relationships-svg {
    min-width: 100%;
    min-height: 100%;
}

.table-entity text.table-name {
    fill: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.2px;
}
    
.table-entity {
    fill: rgb(50, 50, 50);
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
    cursor: move;
}

.table-header {
    fill: rgb(13, 110, 253);
}

.table-entity text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: normal;
}

.table-title {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.2px;
    fill: white;
}

.table-button {
    fill: #fff;
    cursor: pointer;
    rx: 4;
    ry: 4;
}

.table-button:hover {
    fill: #e9ecef;
}

.table-button-text {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    fill: #495057;
    pointer-events: none;
    text-anchor: middle;
    dominant-baseline: middle;
}

/* Estilo para as linhas de relacionamento */
.relationship-line {
    opacity: 0.8; /* Aumentado de 0.7 para melhor visibilidade no layout compacto */
    pointer-events: none;
}

.relationship-line:hover {
    stroke: #0d6efd;
    stroke-width: 2;
    opacity: 1;
}

/* Estilo para a seta */
#arrow path {
    fill: #6c757d;
}

.relationship-arrow {
    fill: #6c757d;
}

.relationship-cardinality {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    fill: #495057;
    font-weight: 600;
}

.zoom-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    background: white;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    gap: 5px;
}

.field-row {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 11px; /* Reduzido de 12px */
    line-height: 1.2; /* Adicionado para compactar */
}

.field-text {
    font-weight: 400;
    letter-spacing: -0.1px;
}

.field-type {
    font-weight: 400;
    fill: #666;
    font-size: 11px;
}

.primary-key {
    font-weight: 500;
    fill: #2c5282;
}

.foreign-key {
    font-weight: 500;
    fill: #805ad5;
}

.zoom-controls button {
    padding: 4px 8px;
}

.table-button text {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0;
}

.tooltip-text, .relationship-label {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: normal;
}

.expanded-fields text {
    font-weight: 400;
    letter-spacing: -0.1px;
}

.relationship-tooltip {
    position: absolute;
    background: white;
    padding: 4px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-size: 12px;
    pointer-events: none;
    z-index: 1000;
}

.toggle-button circle {
    stroke: #0d6efd;
    stroke-width: 1;
    cursor: pointer;
}

.toggle-button text {
    fill: #0d6efd;
    font-family: Arial;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

.toggle-button:hover circle {
    fill: #f8f9fa;
}

.fields-group {
    filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.1));
}